精华内容
下载资源
问答
  • vue封装axios请求api
    2021-12-30 11:10:11

    先创建utils文件创建http.js和requset.js文件 在创建一个api文件创建任意js文件 index.js 然后下载安装axios 在http.js文件中写入代码如下

    import axios from "axios";
    const http = axios.create({
        baseURL: "/api",
        timeout: 10000
    })
    
    // 请求拦截
    http.interceptors.request.use(config => {
        return config
    }, err => {
        throw new Error(err)
    })
    
    
    // 响应拦截
    http.interceptors.response.use(res => {
        return res.data
    }, err => {
        throw new Error(err)
    })
    
    export default http;

    然后再requset文件中写入代码如下

    import http from "./http";
    
    function request({ method = 'get', url, data = {}, params = {} }) {
        return http({
            method,
            url,
            data,
            params
        })
    }
    
    export default request;

    然后再index.js文件写入代码如下

    import request from "../utils/requset";
    // 用户登陆的接口
    export const cnode = () => request({ url: '/home' });
    

    以上代码中请求都是活的,可以写请求的任意地址

    更多相关内容
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • 主要介绍了Vue封装Axios请求和拦截器的步骤,帮助大家更好的对axios进行封装并将接口统一管理,同时为请求和响应设置拦截器interceptors。,感兴趣的朋友可以了解下
  • vue封装axios请求

    2021-11-20 15:28:42
    // 设置请求时间 axios.defaults.timeout = 60000; // 响应拦截器 axios.interceptors.response.use( res=>{ //配置拦截内容 比如用户是否登录 }) let baseURL = "http://192.168.11.100:8080/api/" export ...

    1.新建libs文件夹 作为存放工具类文件

    	新建request.js 文件
    
    import axios from 'axios';//引入axios文件
    // 设置请求时间
    axios.defaults.timeout = 60000;
    // 响应拦截器
    axios.interceptors.response.use( res=>{
    	//配置拦截内容 比如用户是否登录 
    })
    
    let baseURL = "请求域名/api/"
    export default (url, data, method) => {
    //此处没有单独设置 get POST请求  所以在此价格判断
    		if(method=="POST"){
                return axios({
                    url: baseURL + url,
                    data: data,
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',//设置请求头请求格式为JSON
                        'token':sessionStorage.getItem("token") //设置token 其中K名要和后端协调好 获取存储在vuex d的token值 store.state.token
                    },
                })
            }else{
                return axios({
                    url: baseURL + url,
                    params: data,
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',//设置请求头请求格式为JSON
                        'token':sessionStorage.getItem("token") //设置token 其中K名要和后端协调好 获取存储在vuex d的token值 store.state.token
                    },
                })
            }
    }
    

    新建api.js文件 用于存放api接口

    export default {
    	// 放接口文件
    	jiekou:"login/login",//会员登录
    }
    

    在min.js 全局配置

    /**
     * 引入封装好的ajax网络请求以及接口地址列表
     */
    import request from './lib/axios' //
    import api from './lib/api'
    Vue.prototype.$request = request
    Vue.prototype.$api = api
    

    最后使用

    this.$request(this.$api.ToBeReviewed).then(res=>{})
    

    有用的话点个赞吧

    展开全文
  • 主要介绍了vueaxios请求封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 封装Axios请求

    千次阅读 2019-08-14 19:39:03
    封装axios的 get、post方法、请求拦截(请求发出前处理请求)和响应拦截器(处理请求响应后的数据)

    在做 vue 的项目中,获取后端数据使用 axios ,使用的地方可以说是很多了,我写代码总喜欢整整齐齐的,所以,对 axios 请求进行了封装,方便使用,减少了不少的冗余代码呢~

    目录情况如下:

    |-------src
    
    | |-- api
    
    | | |-- http.js
    
    | | |-- roleApi.js
    
    | |-- views
    
    | | |-- role.vue
    

    (1)首先,封装 axios 的 get、post方法、请求拦截(请求发出前处理请求)和响应拦截器(处理请求响应后的数据),新建文件 http.js:

    import axios from 'axios'
    import { Message } from 'element-ui'
    
    // create an axios instance
    const http = axios.create({
      baseURL: '后端接口地址',
      // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
      // withCredentials: true, // send cookies when cross-domain requests
      timeout: 50000
      // request timeout
    })
    
    // 设置 post、put 默认 Content-Type
    http.defaults.headers.post['Content-Type'] = 'application/json'
    http.defaults.headers.put['Content-Type'] = 'application/json'
    
    // request interceptor 请求拦截(请求发出前处理请求)
    http.interceptors.request.use(
      config => {
        // do something before request is sent
        return config
      },
      error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )
    
    // response interceptor 响应拦截器(处理响应数据)
    http.interceptors.response.use(
      /**
       * If you want to get http information such as headers or status
       * Please return  response => response
      */
    
      /**
       * Determine the request status by custom code
       * Here is just an example
       * You can also judge the status by HTTP Status Code
       */
      response => {
        const res = response.data
        const ressuc = res.success
        // 后端返回成功失败是用 success 的true 和 false 判断,所以在这里就获取 response.data 的 success 
        if (ressuc) {
          console.log('response', response)
          return res
        } else {
          Message({
            message: res.message || 'error',
            type: 'error',
            duration: 5 * 1000
          })
        }
      },
      error => {
        console.log('err' + error) // for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    // 封装get方法
    export function get({ url, params }) {
      return new Promise((resolve, reject) => {
        http.get(url, {
          params: params
        }).then(res => {
          resolve(res.data)
        }).catch(err => {
          reject(err.data)
        })
      })
    }
    
    // 封装post方法
    export function post({ url, data }) {
      return new Promise((resolve, reject) => {
        http.post(url, data).then(res => {
          resolve(res.data)
        }).catch(err => {
          reject(err.data)
        })
      })
    }
    

    (2)接下来,对不同的请求进行封装,新建文件 roleApi.js:

    import { get, post } from './http' // 导入axios实例文件中方法
    
    const server = {
      //带参数的 get 方法
      getById(param) {
        return get({
          url: '/role/getById',
          method: 'get',
          params: param
        })
      }
      //不带参数的 get 方法
      getAll() {
        return get({
          url: '/role/getAll',
          method: 'get'
        })
      },
      // post 方法
      save(param) {
        return post({
          url: '/role/save',
          method: 'post',
          data: param
        })
      }
    }
    
    export default server
    

    (3)最后,就是在业务模块直接导入 api 文件,role.vue 文件中使用:

    import apis from '@/api/roleApi'
    // 用try catch包裹,请求失败的时候就执行catch里的代码
    try {
         const param = {
              id: 'admin'
         }             
         const res = await apis.getById(param)
         console.log('getById:', res)
    } catch (e) {
          //提示错误
          console.log(e)
    } 
    

    用这种方式,使用 axios 时只需要一句简单的代码既可以得到返回结果,可以说是很方便啦~

    展开全文
  • Vue封装axios请求 封装axios主要是通过axios创建service实例,实例中放置配置,常见的配置有baseURL(请求发送的原始地址)、timeout(请求超时时间)、headers(请求头)、params(发送get请求的参数)、data...

    Vue之封装axios请求

    封装axios主要是通过axios创建service实例,实例中放置配置,常见的配置有baseURL(请求发送的原始地址)、timeout(请求超时时间)、headers(请求头)、params(发送get请求的参数)、data(发送post请求的参数)、等等

    封装axios请求的另外一个目的是配置请求拦截器,和响应拦截器

    service.interceptors.requesst servcie.interceptors.response 注:service 不是固定名字,只要是axios实例名字都可
    **详情请见axios官方文档**

    /*
    	service.js
    	使用时因为时通过export default service 
    	所以可以通过 import service from "./utils/service.js"
    */
    import axios from "axios";
    import {getToken} from "./auth";
    import {Message} from "element-ui"; //为饿了么ui自带的message
    
    const service = axios.create({
      baseURL: 'http://localhost:8080',
      timeout: 5000,
    
    })
    /*
      请求拦截
     */
    service.interceptors.request.use((config)=>{
      if (getToken()){
        config.headers['token']=getToken(); //在发送请求之前将在请求头中配置token
      }
      return config; 
    },(error)=>{
      return Promise.reject(error); // 对请求错误做些什么
    })
    service.interceptors.response.use((response)=>{
      const res= response;
      console.log(res);
      if (!(res.data.success)){ //请求响应,这里是我后端返回的map对象,中间的key为success传递请求响应状态
        Message({
          type: 'error',
          message: res.data.message ||'请求错误', //弹出的res.data.message 同样为后端传递
        });
        location.reload(); // 刷新表单 重新加载
        return  Promise.reject(new Error(res.data.message ||'请求错误'));
      }else {
        return  res;
      }
    },(error)=>{
      Message({
        type: 'error',
        message:error.message,
      })
      location.reload();
      return Promise.reject(error);
      }
    )
    
    export default service;
    
    

    Vue之封装axios.get、axios.post

    /*
    	这里要需要用到之前封装的service.js 也就是axios实例
    	在http.js中import service from '../utils/service.js'引入
    	get(传入的请求地址url,请求传递的参数){
    	//主要是通过设置config中的method方法决定请求的类型
    	  return service(config);
    	}
    	至于post和get请求的不同之处
    	get传递的是params post传递的是data
    	get/post 方法使用 是 import {get/post} from '../utils/http.js'
    	
    */
    import service from "./service";
    
    export function get(url,params){
    
      const config={
        method:'get',
        url:url,
      }
      if(params){
        config.params=params;
      }
      return service(config);
    }
    export function post(url,params){
    
      const config={
        method:'post',
        url:url,
      }
      if(params){
        config.data=params;
      }
      return service(config);
    }```
    
    
    展开全文
  • axios进行封装并将接口统一管理,同时为请求和响应设置拦截器interceptors。 (PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) axios 是一个基于 promise 的 http 库,可以用在...
  • 主要介绍了Vue Promise的axios请求封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 封装axios请求(基础版)

    千次阅读 2020-12-21 16:06:11
    新建页面,封装axios请求; import axios from "axios"; //创建axios实例 var service = axios.create({ baseURL: "/store/", timeout: 5000, withCredentials: true, headers: { "content-type": ...
  • 主要介绍了VUE项目axios请求头更改Content-Type操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 封装axiosvue中常用的请求方式就是axios,下面讲解axios的封装方式 第一步,需要引入axios import axios from 'axios'//引入axios import router from '../router/index'//引入路由 第二步,定义新的axios let ...
  • Vue如何封装Axios请求

    2021-12-26 13:55:59
    vu如何封装promise请求
  • vue 封装 axios请求方法

    2020-05-22 17:26:29
    import axios from 'axios' axios.defaults.baseURL = 'http://localhost/'; export const request = { get(url,params) { ...新建一个 network 包,做下面的封装 导入 request,然后请求 <template&
  • vue项目中使用axios数据请求,把axios封装在js文件中,接口直接封装在内,页面直接引入使用的方法。 npm 安装 axios 或者 bower 安装 axios 使用 npm: npm install axios 使用 bower: bower install axios ...
  • 前言 使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息。请求超时的时候断开请求,还可以很方便地...2.接着设置axios请求参数。 axios.defaults.timeout = 5000; //请
  • axios封装请求工具
  • Vue如何封装axios请求

    2020-10-28 10:12:36
    Vue封装Axios请求的具体步骤 实际开发过程中,我们项目可能会有大量接口,因此我们写代码的时候,如果不进行封装,则会产生大量冗余代码,API的封装,封装之后便于后期统一维护管理 一.在src文件夹下新建config...
  • vue中axios封装+使用axios请求数据流程

    千次阅读 2022-04-28 13:39:21
    先安装 npm install axios 1,新建request文件夹,包含request.js和api.js文件 request.js import axios from "axios" //使用下面的loading加载状态,所以引入了下面的store,就把上面的store注释了,引入了下面的...
  • 1.基本请求接口(默认是get请求,不写method) axios({ url:'http://123.456' }).then(res =>{ console.log(res) }) 2.post请求接口 axios({ url:'http://123.456', method:"post", }).then(res =&...
  • axios向后端传参时需要设置请求头,确保请求参数的格式为JSON字符串(此时用JSON.stringify(obj)无效时) this.$axios({ method:'', url:'', headers: { 'Content-Type': 'application/json',//设置请求头...
  • 主要介绍了Vue简单封装axios之解决post请求后端接收不到参数问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue项目中axios请求网络接口封装的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue2的管理系统平台中,我们会遇到,如果是登陆之后,用户长期不操作,但是我们要提示用户登录...下面是全部代码,既有axios请求封装,又有拦截器,请看以下request.js: import axios from 'axios' // import {Me
  • Vue封装axios请求

    2019-03-06 15:48:03
    1.引入axios 2.设置请求头 3.配置拦截器 4.引用 import axios from 'axios' import {MessageBox} from 'element-ui' ...Vue.prototype.$axios = axios axios.defaults.headers.post['Content-Type'] = 'ap...
  • 前言 这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题 于是乎,我自己开发了一款面试...axios提供了拦截
  • 然后在utils文件夹下新建一个request.js文件,将aixos请求封装写到里面: import axios from 'axios' import Qs from 'qs' import store from '@/store' import router from '@/router' import filterPath from '@...
  • 主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,240
精华内容 8,896
关键字:

vue封装axios请求