教你如何在vue项目中封装通用的axios_vue 封装axios code

教你如何在vue项目中封装通用的axios

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么要封装axios？

• 统一管理基地址
• 对请求、响应进行处理
• 方便向后台服务器发送请求，减少冗余代码

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、封装步骤

1.安装依赖包

代码如下（示例）：

npm install axios
1

2.开始封装

注：文件名自定义，utils目录下方常用的工具函数。

在src/utils目录下新建request.js文件

// 导入axios
import axios from 'axios'
// 创建一个独立的实力对象 1有可能有多个路径 ，2这样便于修改
const baseURL=''
const instance =axios.create({
  baseURL:baseURL
})
export default (options)=>{
  return instance({
    method:option.method||'GET',
    url:options.url,
   // ES6规则：对象的key可以是动态的变量
    [options.method.toUpperCase()==='GET'?'params' :'data']:option.data
    
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

设置请求拦截器

import store from '@/store'  
instance.interceptors.request.use(config=>{
  // 统一添加请求头 
  const token=store.state.user.profile.token
  if(token){
    //已经登陆成功。统一添加token
    config.headers.Authorization=`Bearer ${token}`
  }
  return config
}, err=>{
   return Promise.reject(err)
})
1
2
3
4
5
6
7
8
9
10
11
12

设置响应拦截器

import router from '@/router'
instance.interceptors.response.use(config=>{
  // 把返回的数据去掉一层data属性
    return res,data
}, err=>{
  if(err.response&&err.response.status===401){
     // token 失效了。跳转到登陆页
      return   router.push('/login')
  }
   return Promise.reject(err)
})

1
2
3
4
5
6
7
8
9
10
11
12

结论：

• 创建axios
• 封装通用的请求方法
• 配置相关的参数，统一处理请求参数
• 请求拦截器：处理请求头token
• 响应拦截器：处理返回数据，token失效问题

3如何使用

在这里插入代码片在src/api目录下新建index.js文件

import request from '@/utils/request.js'

request({
  method: 'post', // 请求方式
  url: '#', // 请求地址
  data: { // 请求参数
    account: 'admin',
    pwd: 123
  }
})
1
2
3
4
5
6
7
8
9
10

扩展

1. 对象访问方式

• 对象.属性名
• 对象[属性名] ===>好处：属性名称可以是变量

2. 动态键

• 封装的代码中有这么一段代码，这里来解释一下。
• es6新规则，对象的key可以是动态的变量
  [options.method.toUpperCase() === ‘GET’ ? ‘params’ : ‘data’]: options.data

[ ]中三元表达式含义：

当传入的值为get时，先将传入的值转大写与后面的值比较，相等则key的名称为 params，反之为data

• 举例展示

const obj={
  msg:'hello'
}
console.log(obj.msg) // hello
 const info='msg'
 console.log(obj[info]) // hello

const obj ={
  msg:'hello'
}
console.log(obj)

const info =abc
const obj ={
  msg:'hello',
  [info]:'nihao'
}
console.log(obj)   // { msg:'hello', abc:'nihao'}

const obj ={
  msg:'hello',
  ['info']:'nihao'
}
console.log(obj)   // { msg:'hello', info:'nihao'}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24