vue2请求拦截器+响应拦截器+接口的封装抽取

需求：将项目请求拦截器+响应拦截器+接口抽取封装

1、安装axios

npm i axios

2、在测试页面引入

import axios from "axios"

3、页面一进来就加载

 created(){

  axios.get("http://xxxxx").then((res)=>{

​    console.log(res)

  })

 },

4、成功返回

接下来升级改造抽取封装

1、请求拦截器+响应拦截器+接口的抽取封装

新建二个文件夹，request放请求拦截器+响应拦截器，api放接口

2、封住抽取请求拦截器放在request.js

import axios from "axios"


// 创建实例

const instance = axios.create({

  baseURL: 'http://XXXXXX',

  timeout: 10000

})

// 请求拦截器

instance.interceptors.request.use((config) => {

console.log(11111)

  return config;

}, err => {

  return Promise.reject(err)

});

// 响应拦截器

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

console.log(2222)

  return res.data

}, err => {

  return Promise.reject(err)

})



// 导出实例

export default instance

3、接口请求放在api.js，注意看自己的接口传参 要不要 { }

import instance from "./request"

// 验证码请求

export const GetCaptchacodeApi = ()=>instance.get("/prod-api/captchaImage")

//登录请求    post不用{}

export const GoLogin = (params)=>request.post('/auth/loginByWeb',params)

// 详情   get  params要传id 之类的 要用{}

export const GetGoodsDetailData = (params)=>request.get('/goods/detail',{params})

4、在要使用的页面直接引入，以login.vue为例

import { GetCaptchacodeApi } from '@/request/api'

 created(){

  this.getCaptchacode()

 },



 methods: {

  // 获取验证码

  async getCaptchacode() {

   let res = await GetCaptchacodeApi();

​	console.log(33333)

   console.log(res)

  },

}

5、响应回来的结果：和前面没有抽取封装的一样

接下来我们来看一下执行的思路图

快去抽取接口吧宝子们，让项目更加有层次感，清晰明了。