axios的简单封装

axios 的封装使我们在请求中简单明了，趁项目刚配置的一次记录下，方便以后使用，有大神觉得不合适的地方可以纠正

1.创建一个https封装的文件， 引入axios

import axios from "axios";

2.创建一个axios实例

const instance = axios.create({
      baseURL: process.env.VUE_APP_URL, //获取配置的不同环境的url
      timeout: 30000,
  })

3.进行请求拦截

// 请求拦截
instance.interceptors.request.use(config => {
  // 转化数据 只是后端需要json 的数据时候转化没有要求就不用转化 需要键值对的话就用qs
  config.data = JSON.stringify(config.data)
  // 配置请求头 headers 
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
  }

  // 给请求添加token 可选
  // const token = localStorage.getItem("token")
  // if(token){
  //   config.headers.token=token
  // }

  return config
}, error => {
  return Promise.reject(error)
})

4.响应拦截 // 响应拦截 instance.interceptors.response.use(response=>{ const res = response.data return res },error=>{

  // 请求异常错误处理
  // 进行switch 对后端定义的错误码进行提示处理
  if(error && error.response.status){
    switch (error.response.status) {
      case 400:
        error.message="请求错误"
        break;
    // .......
      default:
        error.message="链接不可用"
    }
  }else{
    // 超时处理
    if(JSON.stringify(error).includes("timeout")){
      Message.error('服务器响应超时，请再次刷新')
    }
    error.message="链接失败"
  }
  Message.error(error.message)
  return Promise.resolve(error.response)

})
export default instance

5.在创建一个api.js 文件并且引入https文件

 import https from './https'
 

6. 封装请求

    export function getList(params){
      return https.get("/users?since=10",params)
     }
     
     export function getList(params){
      return https.post("/users/list"，params)
    }
    

7.在组件中使用

  import {getList} from '../https/Api'

  getList().then(res=>{
    console.log(res)
  })
  .catch(err=>{
    console.log(err)
  })