什么是拦截器

拦截器就是拦截每一次的请求和响应，然后进行相应的处理。请求拦截器，它可以统一在你发送请求前在请求体里加上token；响应拦截器，是在接受到响应之后进行的一些操作，比如，服务器返回登录状态失效，需要重新登录的时候，就给它跳到登录页面；

创建 axios 实例

const Axios = axios.create({
       baseURL: HOST, // 请求的域名    timeout: 10000000000, // 响应超时时间    responseType: "json",    withCredentials: true, // 跨域请求是否要携带cookie    headers: {
         'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',    }  });

请求拦截器

//在发送请求之前做的一些操作，例如加上tokenAxios .interceptors.request.use( config => {
          // 为请求头对象添加 token 验证的 Authorization 字段     config.headers.Authorization = window.sessionStorage.getItem('token')     return config}, error => {
        //对请求错误做些什么     return Promise.reject(error)})

响应拦截器

//接收到响应后要做些什么，比如跳转到登录页Axios.interceptors.response.use(response => {
   	response => {
       //拦截响应，做统一处理     if (response.data.code) {
         switch (response.data.code) {
           case 1002:          store.state.isLogin = false          router.replace({
               path: 'login',            query: {
                 redirect: router.currentRoute.fullPath            }          })      }    }    return response}, error => {
        //对响应错误做些什么     return Promise.reject(error)})

对每个请求方式进行封装

export function requestGet(url, query) {
   // 查    return Axios.get(url, {
    params: query || {
   } })      .then((res) => {
           return Promise.resolve(res.data)        console.log(res.data);      })  }   export function requestPost(url, data) {
     // 改    return Axios.post(url, data)      .then((res) => {
           return Promise.resolve(res.data)      })  }    export function requestPut(url, data) {
     // 增    return Axios.put(url, data)      .then((res) => {
           return Promise.resolve(res.data)      })  }    export function requestDelete(url) {
     // 删    return Axios.delete(url)      .then((res) => {
           return Promise.resolve(res.data)      })  }

应用

最后把封装的实例在需要的地方导入就可以了。

转载地址：http://oxvii.baihongyu.com/

你可能感兴趣的文章