Vue笔记_05Vue全家桶_请求(axios)

官网

官网

配置

前提： 在src文件夹下创建一个utils文件夹，在utils文件夹下创建一个request.js 文件用于存储axios的配置信息。

[1] 下载axios

npm i axios

[2] 引入axios

import axios from 'axios'

[3] 重写axios

const instance = axios.create({
  baseURL: 基地址,
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'} // 请求头
});

[4] 请求方法封装

• get请求

  const get =(url, params={}, headers={})=>{
    return new Promise((rrsolve,reject)=>{
      instance.get(url, {
        params,
        headers
      })
      .then(function (response) {
        resolve(response.data)
      })
      .catch(function (error) {
        reject(error.data)
      });
    })
  }
  

• post请求
  默认的穿参方式

  instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
  

  将参数转化为字符串格式进行传递

  import QS from 'qs'
  const post = (url, params = {}, headers = {}) => {
   return new Promise((resolve, reject) => {
     instance.post(
       url,
       QS.stringify(params),
       {
         headers: headers
       }
     ).then(res => {
       resolve(res.data)
     })
       .catch(err => {
         reject(err.data)
       })
   })
  }
  

  不修改参数格式—> 用于formData格式数据传递

  const postFile = (url, params = {}, headers = {}) => {
   return new Promise((resolve, reject) => {
     instance.post(
       url,
       params,
       {
         headers: headers
       }
     ).then(res => {
       resolve(res.data)
     })
       .catch(err => {
         reject(err.data)
       })
   })
  }
  

• petch请求

  const patch = (url, params = {}) => {
   return new Promise((resolve, reject) => {
     instance.patch(url, params)
       .then(res => {
         resolve(res.data)
       }, err => {
         reject(err)
       })
       .catch(err => {
         reject(err.data)
       })
   })
  }
  

• put请求

   const put = (url, params = {}) => {
    return new Promise((resolve, reject) => {
      instance.put(
        url,
        params
      ).then(res => {
        resolve(res.data)
      })
        .catch(err => {
          reject(err.data)
        })
    })
  }
  

[5] 拦截器

1.请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 做登录校验
    const token = getToken() || ''
    const needLogin = ['register', 'login']
    if (!token && !needLogin.includes(config.url)) {
      // 跳转到登录页面
      location.href = '/#/login'
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2.响应拦截器

axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      if (!response.data.data) {
        response.data.data = {}
      }
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是2开头的的情况 ---> 与后台开发人员协商好统一的错误状态码
  error => {
    if (error.response) {
      switch (error.response.data.status) {
        case 999:
          ....
          break
        case 403:
          .....
          break
        default:
          Message.error(error.response.data.detail)
      }
      return Promise.reject(error.response)
    }
  })

在拦截错误时获取response

在响应拦截器中默认 2xx会走到response 获取后台返回的数据，除了2xx之外走会走到error，获取error信息，信息格式如下

但是有时我们会在error时想获取后端返回的 错误提示message，那么在这里应该如何获取呢？

原来我们打印出来的这个结构并不是真正的error数据结构，其本质是一个对象，通过error.response可以获取到response即后端返回的数据信息。