基于axios的api接口请求二次封装

1.下载安装axios

npm i axios -s

2.在utils文件中创建一个request.js文件导入axios

import axios from 'axios'

3.二次封装axios

export const baseURL = 'url'     

const request = axios.create({     

    baseURL:baseURL,   //创建基路径

    timeout:60000,           //响应超时

   withCredentials: false    //进行跨域请求时携带凭证（如 cookies）信息，以保持授权状态

})

// 请求的拦截器 request

request.interceptors.request.use((config:any)=>{

    const token = localStorage.getItem("Token")?.replace(/\"/gi,'');  //登录时将token存本地

    config.headers.token = token;                                                  // token 通过请求头带给 服务器  

    return config;

},err=>{

    console.log(err)

})

//响应的拦截器 response

request.interceptors.response.use(res => {

    if(res.data.code!=200){

        router.replace({ name: 'login' })   //响应失败自动跳转登录

        alert(res.data.msg)

    }else{

        console.log(success)

    }

    return res.data;

},err=>{

    // 响应失败

    alert('响应失败')

})

4.暴露封装的请求方法

export default request

5.全局挂载

import request from '.文件路径'

Vue.prototype.$request = request   // 挂载全局

6.使用方式

get请求  this.$request .get('url')

post请求  this.$request .post('url',data)