@
目录axios 概述
Axios 官网 | Axios 中文网 (axios-http.cn)
Axios 中文文档_w3cschool
axios 是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端
它具有以下特征:
⚫支持浏览器和 node.js
⚫支持 promise
⚫能拦截请求和响应
⚫自动转换 JSON 数据
⚫能转换请求和响应数据
axios 基本用法
使用 axios 前先需导入 axios.js
axios.method(url, options).then(ret => {
// ret(自定义) : 服务器响应结果
console.log(ret)
// data 是 固定名称, 用于获取后台响应的数据
console.log(ret.data)
})
-
url
请求地址,请求参数格式可以是 查询字符串, 也可以是路由参数 -
method
:
常见的请求方法,比如get、post、delete、put -
options
参数对象// 格式一: params对象会被axios转化为 url 中的查询参数, 'uname=lisi&id=2' 多用于get请求等 { params: { uname: 'lisi', id: 2 } } // 格式二: 表示 请求体 中的参数,格式为 json { uname: 'lisi', id: 2 }
- ret
表示 axios 把服务器响应结果包装成的一个对象,通常结构如下-
data
: 实际响应回来的数据,可以是对象 -
headers
:响应头信息 -
status
:响应状态码 -
statusText
:响应状态信息
-
axios 全局配置
⚫// 设置超时时间
axios.defaults.timeout = 3000;
⚫// 设置默认地址
axios.defaults.baseURL = 'http://localhost:3000/app';
⚫// 设置请求头
axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerqwer2ewrwe23eresdf23’
eg:
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
axios.get('axios-json').then(function(ret){
console.log(ret.data.uname)
})
axios 常用 API
- axios.get()
- axios.post()
- axios.delete()
- axios.put()
axios.get() / axios.delete() 请求参数传递
// axios get请求传参 通过 URL 传递参数
// 方式一:通过查询字符串传递
axios.get('http://localhost:3000/axios?id=123').then(function(ret) {
console.log(ret.data)
})
// 方式二: restful 形式传递
axios.get('http://localhost:3000/axios/123').then(function(ret) {
console.log(ret.data)
})
// 方式三:通过params 形式传递参数, 与查询字符串形式等效
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret) {
console.log(ret.data)
})
// axios delete 请求传参, 与get()类似, 同样可用 查询字符串形式、 restful形式 来传参
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
axios.post() / axios.put() 请求参数传递
// axios.post 请求传参
//方式一:通过选项传递参数, 参数格式为 josn格式
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
// 方式二: 通过 URLSearchParams 传递参数(application/x-www-form-urlencoded)
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
// axios put 请求传参, 和post 传参类似 同样可以通过 URLSearchParams 传递参数
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret) {
console.log(ret.data)
})
axios()
axios 也提供了类似于 jQuery 中 $.ajax() 的函数,语法如下:
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}) .then(callback)
- axios() 发起GET请求
axios({
method: 'GET',
url: 'http://www.example.top:3006/api/get',
params: { // GET 参数要通过 params 属性提供
name: 'zs',
age: 20
}
}).then(function(res) {
console.log(res.data)
})
- axios() 发起POST请求
axios({
method: 'POST',
url: 'http://www.example.top:3006/api/post',
data: { // POST 数据要通过 data 属性提供
bookname: '攻略富婆走上巅峰',
price: 666
}
}).then(function(res) {
console.log(res.data)
})
axios 拦截器
请求拦截器
在请求发出之前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
// 通过 axios api 发送的请求都会走到这一步
console.log(config)
// 通过对config对象 在请求发出之前进行一些信息设置
// 配置完后,需要 return 出去 config配置对象, 否者配置不成功
return config;
},function(err){
// 处理响应的错误信息
console.log(err)
});
- config对象:
响应拦截器
在获取数据之前对数据做一些加工处理
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
console.log(res)
//在这里对返回的数据进行处理
return res;
},function(err){
// 处理响应的错误信息
console.log(err)
})
- res对象
这里的 res 对象,其实就是axios api
发送请求到服务器响应回来并被包装的结果对象
eg:
// 请求拦截器
axios.interceptors.request.use(function(config) {
// 更具需要可判断当次请求的url
console.log(config.url)
// 设置 请求头中的 `mytoken` 字段
config.headers.mytoken = 'nihao';
return config;
}, function(err){
console.log(err)
})
// 响应拦截器
axios.interceptors.response.use(function(res) {
var data = res.data;
return data;
}, function(err){
console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){ // 这里的 data 是 响应拦截器里 return 出来的数据
console.log(data)
})
在异步函数中使用 axios
/*
async/await处理多个异步任务
*/
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
var info = await axios.get('async1');
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})