欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios封装

程序员文章站 2022-04-10 09:37:11
第一步:配置axios一般我会在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口。// 在http.js中引入axiosimport axios from 'axios'; // 引入axiosimport QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到// vant的toast提示框组件,大家可根据自己的ui组件更改。...

安装

npm install axios

代码

  • axios.js 封装
import axios from 'axios'
import Vue from 'vue'
// import qs from 'qs' // 如果要求 参数序列化

// export let ConfigBaseURL = 'http://*****' // 默认路径,这里也可以使用env来判断环境
export let ConfigBaseURL = 'http://******' // 测试

// 使用create方法创建axios实例
export const Service = axios.create({
  // timeout: 7000, // 请求超时时间
  baseURL: ConfigBaseURL,
  method: 'post' // 默认post
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截器 一般是对参数请求头做处理
Service.interceptors.request.use(config => { // config 向后端传递的参数
  const token = localStorage.getItem('token')
   // 如果路径不是 '/', 参数里面没有token , 参数里面的 whiteList 是 true ,就给请求头拼接token
  if (config.publicPath !== '/' && token && !config.whiteList) { // whiteList 自定义的
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  }
  // config.data && (config.data = qs.stringify(config.data)) // 参数序列化
  return config
})

// 添加响应拦截器  一般是对后端返回的code信息做处理
Service.interceptors.response.use(response => {
  const data = response.data
  // eslint-disable-next-line eqeqeq
  if (data.code && data.code != 200) { // 返回的code不是200
    const msg = data.descrp || data.msg
    Vue.toasted.show(msg, { // totip提示,返回msg错误原因
      duration: 2000,
      type: 'error'
    })
    if (data.code === 401 || data.code === 405) { // 返回规定的状态码,这里是token失效执行的操作
      localStorage.removeItem('token')
      this.$router.push('/phoneLogin')
    }
    return Promise.reject(new Error(msg || '系统出现错误'))
  } else {
    return data
  }
},
(error) => { // 这里是接口报错了但是有返回信息,模拟了下token失效
  if (error.response.data.code === 405) {
    localStorage.removeItem('token')
    this.$router.push('/phoneLogin')
  }
}
)

export default Service

  • api/index.js 调用
import Service from './axios'

// 首页资产 公告
export function index (data) {
  return Service({
    url: 'zh/walletindex', // 接口
    method: 'post',  // 请求方式
    data // 参数
  })
}

// 公告接口
export function detail (params) {
  return Service({
    url: 'zh/fil_usdt',
    method: 'get',
    whiteList: true, // 自定义的参数,
    params
  })
}

页面使用

import { index, detail } from 'src/api/index'

export default {
  data() {
    return {
    	indexData:{}
    	usdt:{}
    };
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      const res = await index({ page : 1 })
      this.indexData = res.data
    },
    async getdetail  () {
      const res = await detail({ params: { page: 1 } })
      this.usdt = res.data
    }
};

本文地址:https://blog.csdn.net/weixin_44955769/article/details/112561057