共计 3075 个字符,预计需要花费 8 分钟才能阅读完成。
学习 axios 之前能够先搭建一个模仿数据申请服务器:
一、json-server 服务器搭建
GitHub:https://github.com/typicode/j…
1、下载 json-server
npm install -g json-server
2、创立一个 db.json 复制如下代码
{
"posts": [{ "id": 1, "title": "json-server", "author": "typicode"}
],
"comments": [{ "id": 1, "body": "some comment", "postId": 1}
],
"profile": {"name": "typicode"}
}
3、在 db.json 同级目录下执行如下命令
json-server --watch db.json
通过拜访提供给咱们的链接,可能模仿失去申请数据;
例如地址栏拜访:
http://localhost:3000/posts
能够失去如下数据
二、axios 简介
https://github.com/axios/axios
axios 是一个基于 node 的 HTTP 客户端,能够在浏览器端向服务器发送 ajax 申请,也能够在 node 端向远端服务发送 http 申请。
特点:
1、能够在浏览器 make XMLHTTPRequests
2、能够在 node 端发送 http 申请
3、反对 Promise API
4、申请响应拦截器
5、对申请和相应数据做转换
6、勾销申请
7、主动将申请数据转换成 json 数据
8、客户端反对进攻 XSRF
三、axios 配置
配置办法有很多,个别我的项目中应用 npm 和 yarn 装置
npm install axios
yarn add axios
学习阶段能够应用 CDN 形式间接应用 script 标签引入
<script src= 'http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
国内服务器能够应用 bootcdn 上的资源
<script src= 'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js'></script>
四、axios 根本应用
1、发动一个 GET 申请
btn[0].onclick = ()=>{
axios({
method: 'GET',
url: 'http://localhost:3000/posts'
}).then(res=>{console.log(res) //{data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
console.log(res.data)//[{"id": 1, "title": "json-server", "author": "typicode"}]
})
}
2、发动一个 POST 申请
btn[1].onclick = ()=>{
axios({
method: 'POST',
url: 'http://localhost:3000/posts',
data: {
title: 'Hello Axios',
author: 'Liane'
}
}).then(res=>{console.log(res)
})
}
五、axios 的办法
1、axios.request(config)– 与 axios() 的应用办法统一。
2、axios.get(url[,config])– 发送 GET 申请,个别用于获取数据
3、axios.post(url[,data,config])– 发送 POST 申请,个别用于提交数据和上传文件。
4、axios.delete(url[,config])– 发送 DELETE 申请,参数能够放在 url 上也能够和 post 一样放在申请体中。
5、axios.put(url[,data,config]])– 发送 PUT 申请,对数据全副进行更新。
六、Request Config
config 中可设置如下参数:
{
url: '/posts', // 设置申请门路
method: 'get', //default, 设置申请类型
baseURL: 'http://localhost:3000', // 设定申请的协定和域名等根底构造,在发动申请时会主动拼接 url 参数的门路
transformRequest:[ // 对申请的数据在发动申请前做预处理
(data,headers)=>{return data}
],
transformResponse:[ // 对申请响应后果做预处理
(data)=>{return data}
],
headers: {'X-Requested-Width','XMLHttpRequest'},// 配置申请头信息
params: { // 设定 url 参数 --http://localhost:3000/index/ID:12345
ID: 12345
},
paramsSerializer: (data)=>{//params 参数序列号
return Qs.stringify(params,{arrayFormat:'brackets'})
},
data: { // 申请体设置为对象,申请发动时会主动转成 json 格局
firstName: 'Fred'
},
data: 'Country=Barasil&City=Belo',// 申请体设置为字符串,会间接发动申请
timeout: 1000,// 超时工夫,若申请发动超过这个工夫,则申请会勾销,单位为 ms
widthCredentials: false, // 在跨区申请时对 cookie 的携带做设置,值为 false 示意不携带 cookie
adapter: (data)=>{ // 对申请的适配器做设置 - 设置发送 ajax 或者在 node 中发送 http 申请
/*...*/
},
auth: {
username:'janedoe',
password: 's00pers3crept'
},
responseType: 'json',
responseEncoding: 'utf8',
xsrfCookieName: 'XSRF-TOKEN', // 跨站申请标识,对 cookie 名字做设置。proxy: { // 代理
protocol: 'https',
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
...
}
七、axios 的默认配置
axios.defaults.method = 'GET';// 设置默认的申请类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';// 设置根底 URL
axios.defaults.timeout = 30000;// 设置超时工夫
axios({url: '/posts'}).then(res=>{console.log(res)
})
八、axios 创立实例对象发送申请
在理论开发中,可能有多个服务器别离解决不同的申请,因而能够针对不同的服务器创立不同的 axios 实例
语法:axios.create()
cosnt myAxios1 = axios.create({
baseURL: 'http://xxxx/xxx',
timeout: 2000
})
// 能够间接调用
myAxios1({url: '/xxx'}).then(res=>console.log(res))
// 也能够应用 axios 的办法调用
myAxios1.get('/xxx').then(res=>console.log(res))