vue2,axios封装

下载: npm install axios -S

import Axios from 'axios'
import qs from 'qs'
import { Toast } from 'vant'

// 创建实例
const service = Axios.create({
  baseURL: process.env.VUE_APP_API_URL, // 接口基础地址
  timeout: 10000, // 响应超时时间
})

// 请求拦截器
 service.interceptors.request.use(
   (config) => {
     // 挂在token, 根据自己方式判断和自定义参数
     if(localStorage.getItem('token')){
       config.headers['Authorization'] = localStorage.getItem('token')
     }
     // 不同请求方式 所用type不同
     if(!config.headers['Content-Type']){
       if(config.method == 'post' || config.method == 'POST'){
         config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
         config.data = qs.stringify(config.data) // 请求参数序列化
       } else {
        config.headers['Content-Type'] = 'application/json; charset=utf-8'
       }
     }
     return config
   },
   (error) => {
     return Promise.reject(error)
   }
 )
 // 响应拦截器
 service.interceptors.response.use(
   (res) => {
    // 业务逻辑
     const { data } = res
     // 根据后端返回状态判断
     if (data.errcode === 0) {
       // 自己业务处理
     } else {
       return Promise.reject(new Error('Error'))
     }
     return data
   },
   (error) => {
     console.log(error, 'axios error')
     if(error && error.response){
       switch(error.response.status){
         case 404:
          Toast.fail('接口请求地址出错!')
         break;
         case 500:
          Toast.fail('服务器内部出错!')
         break;
         default:
          Toast.fail('请求异常请联系管理员!')
         break;
       }
     }
     return Promise.reject(error)
   }
 )
 
 export default service
 
 

 后续引用用法

import request from '../utils/request' // 上述封装的js

// get 方式
export const getInfo = (params) => {
  return request({
    url: '你的接口地址',
    method: 'get',
    params
  })
}

// post方式
export const getFrom = (data) => {
  return request({
    url: '你的接口地址',
    method: 'post',
    data
  })
}