学习axios之前可以先搭建一个模拟数据请求服务器：
一、json-server服务器搭建
GitHub:https://github.com/typicode/j...
1、下载json-server
npm install -g json-server2、创建一个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/axiosaxios是一个基于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 axiosyarn add axios学习阶段可以使用CDN方式直接使用script标签引入
国内服务器可以使用bootcdn上的资源
四、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))