封装一个axios请求(请求拦截器:request，相应拦截器:response)的应用

0:安装axios

npm install axios --save

1:引入axios

import axios from "axios"

2:初始化axios 配置baseurl

let service= axios.create({
    baseURL:"www.baidu.com"
})

3:配置request(响应拦截器)

service.interceptors.request.use(
   //config 返回请求信息 请求体 请求头
    config => {
        // config 发送请求
        return config;
    },
    error => {
        return console.log(error);
    }
)

4:配置响应拦截器 response

service.interceptors.response.use(  response => {
//返回响应的值 可以根据 status的值进行判断
    if (response.status === 200) {
        return response.data;
    } else {
    }
},
error => {
    return console.log(error);
})

5:导出 axios 

export default service

6:man.js引入配置

//引入配置的axios的文件路径
import axios from "../src/util/index"

Vue.prototype.$axios=axios

7:全局使用请求拦截器 

this.$axios({
//路径
  url:"/api",
//请求方式
  method:"post",
//请求体  
  data:{},
//请求头
  headers:{},
  
}).then(res=>{
//响应拦截器返回值
  console.log(res)
})