Vue axios简易封装

标签：axios 封装 请求 url token Vue return data

1.安装axios

npm install axios -g  

2.创建utils文件夹，新建文件request.js对axios进行封装

3.设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。 axios.defaults.timeout = 10000;

4.post请求头的设置

post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

5.设置请求拦截器

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。 vuex

// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '@/store/index';

// 请求拦截器axios.interceptors.request.use(    
    config => {        
        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
})

sessionStorage

// axios请求拦截
axios.interceptors.request.use(config => {
    //为请求头对象，添加token验证的Authorizaion字段
    config.headers.Authorization = window.sessionStorage.getItem("token");
    return config
})

6.封装get方法和post方法

import axios from "axios";
import qs from "qs";

let baseURL = "http://127.0.0.1:8080/";

export default {
  post(url, data) {
    return axios({
      method: "post",
      url: `${baseURL}${url}`,
      data: qs.stringify(data),
      timeout: 10000
    });
  },
  put(url, data) {
    return axios({
      method: "put",
      url: `${baseURL}${url}`,
      data: qs.stringify(data),
      timeout: 10000
    });
  },
  delete(url, data) {
    return axios({
      method: "delete",
      url: `${baseURL}${url}`,
      // url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    });
  },
  get(url, params) {
    return axios({
      method: "get",
      url: `${baseURL}${url}`,
      params: params, // get 请求时带的参数
      timeout: 10000
    });
  }
}

7.总结

import  axios  from  "axios";
import  qs  from  "qs";
import store from '@/store/index';

let  baseURL  =  "http://127.0.0.1:8888/api/private/v1/";
// let baseURL = "";
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
// axios.interceptors.request.use(    
//     config => {        
//         // 每次发送请求之前判断vuex中是否存在token        
//         // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
//         // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
//         const token = store.state.token;        
//         token && (config.headers.Authorization = token);        
//         return config;    
//     },    
//     error => {        
//         return Promise.error(error);    
// })
// const test = {} 替换 export default
export  default  {
    post(url,  data)  {
        return  axios({
            method:   "post",
            url:   `${baseURL}${url}`,
            data:  qs.stringify(data),
            timeout:  10000
        });
    },
    put(url,  data)  {
        return  axios({
            method:   "put",
            url:   `${baseURL}${url}`,
            data:  qs.stringify(data),
            timeout:  10000
        });
    },
    delete(url,  data)  {
        return  axios({
            method:   "delete",
            url:   `${baseURL}${url}`,
            // url,
            data:  qs.stringify(data),
            timeout:  10000,
            headers:  {
                "Content-Type":   "application/x-www-form-urlencoded"
            }
        });
    },
    get(url,  params)  {
        return  axios({
            method:   "get",
            url:   `${baseURL}${url}`,
            params:  params,
              // get 请求时带的参数
            timeout:  10000
        });
    }
}

   

8.使用

引用全局配置main.js

import request from './utils/request.js'

Vue.prototype.$http = request; // 将api挂载到vue的原型上

使用

async getdata(){
      const { data: res } = await this.$http.get('/user/playlist',{uid:32953014})
      console.log(res);
}

标签：axios,封装,请求,url,token,Vue,return,data
From： https://www.cnblogs.com/happy-p/p/17234373.html