常见axios的封装

vue2

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Mock from 'mockjs'

// 将axios设置为全局属性
Vue.use(VueAxios,axios)
// 将Mock设置为全局属性
//Mock是模拟接口数据的
Vue.prototype.Mock = Mock

// 创建一个新的axios对象，用来请求token
const newAxios = axios.create({baseURL: '/v1'})
// 配置全局基础URL地址
axios.defaults.baseURL = '/v1'
// 配置全局的请求超时时间
axios.defaults.timeout = 3000
// 请求token账号 
const username = 'jack'
const password = '123'

// 配置axios请求拦截，将token设置到请求头部中
axios.interceptors.request.use(async config => {
    // localstorage中获取token，判断token是否存在并且是否过期
    let token = localStorage.getItem('token')
    if(!token || Date.now() > localStorage.getItem('expires') * 1000 ){
//如果token过期则需要重新的登录，这里可以跳转到登录页面，这里的用户名和密码是写死的
        const {data:{code,data}} = await newAxios.post('/accesstoken',{username,password})
        if(code === 0){
            localStorage.setItem('token',data.token)
            localStorage.setItem('expires',data.expires)
            token = data.token
        }
    }
    config.headers.Authorization = `Bearer ${token}`
    return config
})

// 响应拦截
axios.interceptors.response.use( response => {
    return response.data
},error => {
    return Promise.reject(error)
})

vue3+typescript

vue这里的用户名和密码同样是写死的，可以跳转到登录页

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Mock from 'mockjs'

// 将axios设置为全局属性
Vue.use(VueAxios,axios)
// 将Mock设置为全局属性
Vue.prototype.Mock = Mock

// 创建一个新的axios对象，用来请求token
const newAxios = axios.create({baseURL: '/v1'})
// 配置全局基础URL地址
axios.defaults.baseURL = '/v1'
// 配置全局的请求超时时间
axios.defaults.timeout = 3000
// 请求token账号
const username = 'jack'
const password = '123'

// 配置axios请求拦截，将token设置到请求头部中
axios.interceptors.request.use(async config => {
    // localstorage中获取token，判断token是否存在并且是否过期
    let token = localStorage.getItem('token')
    if(!token || Date.now() > localStorage.getItem('expires') * 1000 ){
        const {data:{code,data}} = await newAxios.post('/accesstoken',{username,password})
        if(code === 0){
            localStorage.setItem('token',data.token)
            localStorage.setItem('expires',data.expires)
            token = data.token
        }
    }
    config.headers.Authorization = `Bearer ${token}`
    return config
})

// 响应拦截
axios.interceptors.response.use( response => {
    return response.data
},error => {
    return Promise.reject(error)
})

vue3挂载全局

app.config.globalProperties.XXX = XXX

在组件的steup中使用

//获取this

import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

proxy.$http.get()

微信小程序

小程序中使用的是wx.request的异步promise并非axios

这里的用户名密码同样是写死的，可以跳转到登录页进行操作

微信账号登录可查看微信文档

// API接口URL地址
const baseUrl = 'http://127.0.0.1:8000/v1'
const ajax = (method,url,data) => {
   // 拼接请求的url
    url = baseUrl + url
    // 从本地存储中获取token
    const token = wx.getStorageSync('token')
    return new Promise((resolve,reject) => {
        // 判断是否存在或过期
        if (!token || Date.now() > wx.getStorageSync('expire') * 1000 ) {    
          // 过期请求token
          wx.request({
            url: baseUrl +  '/accesstoken',
            method: 'POST',
            data: {username:'jack',passowrd:123},
            success(res){
              const {code,data} = res.data
              if(code === 0 ){
                wx.setStorageSync('token', data.token)
                wx.setStorageSync('expire', data.expires)
                wx.request({
                  url, 
                  method,
                  data,
                  header: {
                    Authorization: 'Bearer ' + data.token 
                  },
                  success: res => {
                    resolve(res.data)
                  },
                  fail: error => {
                    reject(error)
                  }
                })
              }else{
                reject(res)
              }       
            }
          })
        }else{
          wx.request({
            url, 
            method,
            data,
            header: {
              Authorization: 'Bearer ' + token 
            },
            success: res => {
              resolve(res.data)
            },
            fail: error => {
              reject(error)
            }
          })
        }
    })
}

// 暴露模块
module.exports = ajax

react中和vue3相同

可以直接使用window.XX=XX挂载到window上全局使用