Axios
# Axios
# 安装 axios
同样在项目文件夹中用 node 安装 axios
npm i axios
# 封装请求模块
为了方便，我们把 axios 单独封装一个模块用于项目中请求操作
// 基于 axios 封装的请求模块
import axios from 'axios'
// 创建一个axios实例 我们通过这个实例去罚请求,把需要的配置配置发给这个实例来处理
const request = axios.create({
baseURL: 'http://api-toutiao-web.itheima.net' // 请求的基本路径 前缀
})
// 导出请求方法
export default request
2
3
4
5
6
7
8
9
10
在外部直接调用封装好的 axios 实例
//导入模块
import requset from '@/utils/request'
//定义方法
requset({
method: '请求方式',
url: '请求地址后缀',
data: '传入参数' //data 用来设置 POST 请求体
}).then(res => {
//成功时返回结果
console.log(res)
}).catch(err => {
//失败结果
console.log(err)
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
当然我们可以把所有的请求都封装成函数然后统一的组织到模块中进行管理，这样做的好处就是：管理维护更方便，也好重用。
下面是我们优化封装请求的具体操作。
1、创建 src/api/user.js ，封装登录请求方法
/**
* 用户相关请求模块
*/
import request from '@/utils/request'
// 用户登录
export const login = (data) => {
return request({
method: 'POST',
url: '/mp/v1_0/authorizations',
// data 用来设置 POST 请求体
data
})
}
2
3
4
5
6
7
8
9
10
11
12
13
14
2、在登录组件中加载使用
import { login } from '@/api/user'
methods: {
login () {
// 获取 表单数据 表单验证 验证通过提交登陆 处理结果
this.loginLoading = true
// 在此使用封装好的登陆方法
login(this.user).then(res => {
// console.log(res)
this.$message({
message: '登陆成功',
type: 'success'
})
// 关闭 登录按钮的loading
this.loginLoading = false
// 将接口返回的用户相关数据放到本地存储,方便应用数据共享
// 本地存储只能存储字符串,而res返回的是一个对象
// 如果想要存储对象、数组类型的数据,则把它们转为json字符串进行存储
// 任何对象obj.toString() 都为 object
// 使用json.stringify()方法
// 本地存储为字符串
window.localStorage.setItem('user', JSON.stringify(res.data.data))
// 登录成功跳转到首页 如果路由中没有指定name则需要加上地址后缀 非常冗余
this.$router.push({
name: 'home'
})
// eslint-disable-next-line handle-callback-err
}).catch(err => {
this.$message.error('登陆失败,手机号或验证码错误')
// console.log(err)
this.loginLoading = false
})
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 解决 axios 中转成 js 对象后 int 超出范围
JavaScript 能够准确表示的整数范围在 -2^53 到 2^53 之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。
Math.pow(2, 53) // 9007199254740992
9007199254740992 // 9007199254740992
9007199254740993 // 9007199254740992
Math.pow(2, 53) === Math.pow(2, 53) + 1
// true
2
3
4
5
6
7
上面代码中，超出 2 的 53 次方之后，一个数就不精确了。
ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 这两个常量，用来表示这个范围的上下限。
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true
2
3
4
5
6
7
8
9
上面代码中，可以看到 JavaScript 能够精确表示的极限。
后端返回的数据一般都是 JSON 格式的字符串。
'{ "id": 9007199254740995, "name": "Jack", "age": 18 }'
如果这个字符不做任何处理，你能方便的获取到字符串中的指定数据吗？非常麻烦。所以我们要把它转换为 JavaScript 对象来使用就很方便了。
幸运的是 axios 为了方便我们使用数据，它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象。
// { id: 9007199254740996, name: 'Jack', age: 18 }
JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }')
2
可以看到，超出安全整数范围的 id 无法精确表示，这个问题并不是 axios 的错。
我们接口返回的文章数据 id 是 json 字符串 axios 默认将 json 字符串转成 js 对象来方便使用，但是转了之后 id 超出了 js 中的 int 范围值发生了改变
了解了什么是大整数的概念，接下来的问题是如何解决？
json-bigint (opens new window) 是一个第三方包，它可以帮我们很好的处理这个问题。
# 安装
npm install json-bigint
2
# parse 将 json 字符串转为 json-bigint 类型
将 json 字符串转为 json-bigint 类型
const str = '{'id':12354564698748972134}'
// 转换
JSONbig.parse(str)
//读取并转为字符串
JSONbig.parse(str).id.toString()
2
3
4
5
6
# stringfy 把 json-bigint 类型转回 js 对象
把 json-bigint 类型转回 js 对象
const data = JSONbig.parse('{'id':12354564698748972134}')
// 转换
JSONbig.stringifly(data)
2
3
4
# 常见的 axios 配置
axios({
method:'方法',
path:'url',
headers: {
'名字' : '值'
},
data : {
'名字' : '值'
},
parms : {
'名字' : '值'
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
- method: 方法
- GET 一般用于查询
- POST 一般用于添加
- PUT 一般用于修改，完整替换
- DELETE 一般用于删除
- PATCH 一般用于修改，局部修改
- path: 请求路径
- 返回状态码
- 200 ok
- 400 请求参数错误
- 403 用户非认证，无权限登陆
- 507 服务器数据库异常
- 请求参数
- 请求头 Headers : 使用 headers: {名：值}
- 查询参数 Query : 使用 parms: { } Query 参数 axios 会转成为 key=value&key=value 的数据格式以？分割 url 后面传递给接口
- 请求体 Body : axioos 通过 data : { }
- 路径参数：请求路由中的 冒号: xxx 表示路径参数，使用时把:xxx 替换掉，如: url/:xxx 传 123 参就写 url/123 字面意思上拼接 url 路径