共计 4763 个字符，预计需要花费 12 分钟才能阅读完成。
Axios 是什么？
Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中
Axios 的特点
- 从浏览器中创立 XMLHttpRequests
- 从 node.js 创立 https 申请
- 反对 Promise API
- 拦挡申请数据和响应数据
- 勾销申请
- 主动转换 JSON 数据
- 客户端反对进攻 XSRF
如何引入？
应用 npm 引入
$ npm install axios应用 bower 引入
$ bower install axios应用 cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>应用 xhr 封装 ajax 申请参数
//4. 响应的 json 数据主动解析为 js 的对象 / 数组
function axios({
url,
method='GET',
params={},
data={}}) {
// 返回一个 Promise 对象
return new Promise((resolve,reject) => {// 解决 method(转大写)
method = method.toUpperCase()
// 解决 query 参数(拼接到 url 上) id=1&xxx=abc
/*
{
id: 1,
xxx: 'abc'
}
*/
let queryString = ''
Object.keys(params).forEach(key => {queryString += `${key}=${params[key]}&`
})
if (queryString) {
// 去除最初的 &
queryString = queryString.substring(0,queryString.length-1)
// 接到 url
url += '?' + queryString
}
//1. 执行异步 ajax 申请
// 创立 xhr 对象
const request = new XMLHttpRequest()
// 关上连贯(初始化申请, 没有申请)
request.open(method, url, true)
// 发送申请
if (method === 'GET' || method === 'DELETE') {request.send() // 异步的
}else if(method==='POST' || method === 'PUT'){request.setRequestHeader('Content-Type','application/json;charset=utf-8')// 通知服务器申请体的格局是
request.send(JSON.stringify(data)) // 发送 json 格局的申请参数
}
// 绑定状态的监听
request.onreadystatechange = function () {
// 发送申请是异步的, 绑定状态的监听为同步因而该函数放哪后面和前面都能够
if (request.readyState !== 4) {return}
// 如果响应状态码在 [200,300] 之间代表胜利, 否则失败
//es6 解构赋值
const {status, statusText} = request
// 如果申请胜利了, 调用 resolve()
if (status>=200 && status<=299) {
// 筹备后果数据对象 response
const response = {data:JSON.parse(request.response), // 响应体解析好的数据
status, // 响应体的状态码
statusText // 响应体对应的文本
}
resolve(response)
}else{// 如果申请失败了, 调用 reject()
reject(new Error('request error status is' + status))
}
}
})
}指定默认配置
在文档中具备三个罕用的全局 axios 默认值：
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 传入 token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 在发送前编码所有字符, 此设置是默认设置。咱们罕用的设置是 axios.defaults.baseURL, 用于定义 url 地址，使得咱们在参数传递时，只传递参数对应参数即可。例:
// 指定默认配置
axios.defaults.baseURL = 'http://localhost:3000'
/* 1.GET 申请：从服务器端获取数据 */
function testGet(){
axios({
url:'/posts',
params:{id:1}
}).then(response => {console.log('/posts get',response.data)
})
}
/* 2.POST 申请：向服务端去存储数据 */
function testPost() {
axios({
url:'/posts',
method:'post',
data:{title: "json-server4", author: "typicode4"}
}).then(response => {console.log('/posts post',response.data)
})
}
/* 3.PUT 申请：更新服务器曾经数据 */
function testPut() {
axios({
url:'/posts/4',
method:'put',
data:{title: "json-server5", author: "typicode5"}
}).then(response => {console.log('/posts put',response.data)
})
}
/* 4.DELETE 申请：删除服务器端的数据 */
function testDelete() {
axios({
url:'/posts/4',
method:'delete',
})
.then(response => {console.log('/posts delete',response.data)
})
}自定义实例默认值
咱们为什么要设计自定义实例？
- 应接需要：我的项目中由局部接口须要的配置由另一部分须要的配置不一样
- 解决办法：创立 2 个新的 axios 实例，每个都有本人特有的配置，能够利用于不同要求的申请接口中。
const instance = axios.create({baseURL : 'http://localhost:4000'})
// 应用 instance 发申请
instance({url:'/xxx' // 申请 4000})
instance.get('/xxx')
// 创立第二个实例，用于更改不同的配置
const instance2 = axios.create({baseURL:'htto://localhost:8081'})
instance2({url:'/yyy'})
instance2.get('/yyy')申请拦截器
// 增加申请拦截器(回调函数)
axios.interceptors.request.use(
config => {
// 在发送申请申请之前会执行下列如下
console.log('request interceptor1 onResolved()')
return config
},
error =>{
// 在发送申请失败会执行下列如下
console.log('request interceptor1 onRejected()')
return Promise.reject(error)
}
)
// 增加响应函数
axios.interceptors.response.use(
response => {
// 在响应数据胜利后会执行如下
console.log('response interceptor1 onResolved')
return response
},
function(error){
// 在响应数据失败后会执行如下
console.log('response interceptor1 onRejected')
return Promise.reject(error)
}
)
// 发送申请
axios.get('http://localhost:3000/posts')
.then(response => {console.log('data',response.data)
})
.catch(error => {console.log('error',error.message)
})撤销申请
当咱们点击按钮进行发送申请的时候，如果此时申请正在发送中，而用户却不通晓，用户可能会反复点击按钮进行发送申请，此时咱们应用撤销申请，如果以后申请还正在响应，用户再次点击按钮则会勾销上次正在发送的申请，避免服务器接管多个申请，并屡次做出响应。
实例：
// 定义拦截器模块
// 增加申请拦截器
axios.interceptors.request.use((config) => {
// 在筹备发申请前, 勾销未实现的申请, 使得反复点击时, 勾销上次发送的申请
if (typeof cancel === 'function') {cancel('勾销申请')
}
// 给 config 增加一个 cancelToken 的配置
config.cancelToken = new CancelToken(function executor(c) { //c 是用于勾销以后申请的函数
// 保留勾销函数, 用于之后可能须要勾销以后的申请
cancel = c;
})
return config
})
// 增加响应拦截器
axios.interceptors.response.use(
// 当响应胜利后，勾销在发送申请时增加的撤销函数
response => {
cancel = null
return response
},
error => {if (axios.isCancel(error)) {console.log('申请勾销的谬误',error.message)
// 中断 Promise 链 下面要中断请求
return new Promise(() => {})
}else{ // 申请出错了
cancel = null
// console.log('申请 1 失败了',error.message)
// 将谬误向下传递
// throw error 上面要将谬误向下传递
return Promise.reject(error)
}
}
)
// 引入 CancelToken 构造函数
const CancelToken = axios.CancelToken;
let cancel // 用于保留申请的函数
function getProduct1() {
axios({url:'http://localhost:4000/products1',}).then(
response => {console.log('申请 1 胜利了',response.data)
},
error => {// 只用于解决申请失败的状况, 勾销申请的谬误不必
console.log('申请 1 失败了',error.message)
}
)
}强制撤销申请
/* 撤销申请 */
function cancelReq() {// alert('勾销申请')
// 执行勾销申请的函数
// 没有点过发送数据的按钮, 当点击过发送数据的按钮后 cancel 将会存储一个函数
// 故须要在强制勾销申请时判断 cancel 是否是一个函数，如果是函数阐明还正在发送申请中
if (typeof cancel === 'function') {cancel('强制勾销申请')
} else{console.log('没有可勾销的申请')
}
}以上为 axios 的总结啦，有帮忙的话就点个赞呗！
具体利用也能够到官网文档进行查看官网中文文档
正文完
