axios二次封装

封装一：

/**
 * axios 二次封装
 */
import axios from "axios"
 /**
  * 根据node环境来配置baseUrl
  */
 const baseURL = process.env.NODE_ENV === 'development'?
 'https://www.quanzhan.site:8889/api/v1'
 :
 '生产环境'
 /**
  * 创建 axios 实例
  */
 const service = axios.create({
   baseURL,
   timeout:10000 // 超时时间
 })
 /**
  * 请求拦截
  */
 service.interceptors.request.use(config=>{
  // 请求头中携带token数据 - 需要注意后端配置
  config.headers['Authorization'] = 'Bearer tokenziduan'
  return config
 },error=>{
   return Promise.reject(error)
 })

 /**
  * 响应拦截
  */
 service.interceptors.response.use(resData=>{
   /**
   * response.status 为 HTTP 状态码
   */
   if(resData.status>=200 && resData<300){
      /**
     * 获取响应数据，处理前后端接口规范内容
     */
     const { code, data} = resData.data
     if(code === 200){
       return data
     }
     // 当token 有异常的时候，应该清空状态store 中的数据，跳转到登录页面重新登录
   }
 },error=>{
   return Promise.reject(error)
 })

使用axios

api/user.js

/*  引入axios封装 */
import request from '@/utils/request'
import API from './constants' // 保存变量url

/**
 * 获取所有主分类
 */
export const getCategories = () => {
  return request({
    method: 'GET',
    url: API.TABS_API, // 变量保存地址
    // params: {},// 传递的是路径中的参数
    // data: {}, // 传递的是主体参数
  })
}

export function getUser (params) {
  return request({
    url: API.USERS_API,
    method: 'get',
    params
  });
}

组件使用获取网络请求

/* 引入网络请求 */
import { getCategories } from '../../api/use'
// 方法一：getCategories () 返回的是promise对象
getCategories ().then(data=>{console.log('captcha:',data)})

// 方法二： 同步方法写异步逻辑 - 可读性友好
 async ()=>{
    let resault = await getCategories ()
    console.log(resault);
}

// 方法三： 优化- 捕捉错误
async ()=>{
    try{
      let resault = await getCaptcha()
      console.log(resault);
    }catch(erro){
      console.log(erro);
    }

vue-element-admin的axios二次封装

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

/* 定义 baseURL -- 适应不同环境请求不同接口 */
// const baseURL = process.env.NODE_ENV === 'development' ? '开发测试接口' : '生产服务器接口'
const baseURL = process.env.NODE_ENV === 'development' ? 'http://quanzhan.site:3000/' : 'http://www.test-site.com'

// 创建axios实例
const service = axios.create({
  baseURL,
  timeout: 10000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
	  // 让每个请求携带token--['X-Token']为自定义key 根据后端自行修改
    config.headers['X-Token'] = getToken() 
	// config.headers.authorization = 'Bearer ' + store.state.userModule.token

  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
  //           confirmButtonText: '重新登录',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(() => {
  //           store.dispatch('FedLogOut').then(() => {
  //             location.reload();// 为了重新实例化vue-router对象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service