回顾axios简封装

124 阅读1分钟

1.引入axios模块

import axios from 'axios'

2.创建一个axios实例对象(对象中包含get和post方法)

let service =  axios.create({
  baseURL:'http://localhost:3000/admin' , 
  timeout: 5000 // 请求超时时间
})

3.requset拦截器

service.interceptors.request.use(config => {
  //判断是否存在token
  if(localStoreage.token){
   //设置统一的请求header
   config.header.Authoriation=localStorage.token
  }
  return config
}, error => {
  Promise.reject(error)
})

4.reponse拦截器

service.interceptors.response.use(res => {
    //在响应前做的事情
        if (res.data.code == 666) {
            return res.data
        } else {
            return Promise.reject(res.data.msg);
        }
    },
    error => {
        return Promise.reject(error)
    });

5.将创建的axios对象挂载在Vue原型上

//main.js
import $axios from '../src/utils/requset'
Vue.prototype.$axios = $axios;

6.调用axios的实例

let url = "/city/getList";
this.$axios
    .get(url)
    .then(res => {
    this.list = res.cities;
    console.log(res.cities);
})
    .catch(err => {
    console.log(err);
});