Axios.js 基本用法

了解更多请访问http://www.axios-js.com/zh-cn/

一、什么是axios.js

• axios.js 是一个基于 promise 的 HTTP 库，支持浏览器和 Node 环境；
• 说明白点，就是使用这个库来执行 Ajax 请求，获取 JSON 数据；
• 我们可以利用 axios 可以发送 get、post 等一系列请求，然后得到数据；

二、特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

三、安装

安装方式，提供两种常用的，一种在 node 下运行，另一种在浏览器下运行；

1、使用 npm 在命令行运行如下命令，加载需要的包

       

        
npm install axios
       

实例

       

        
//引入axios
        
constaxios=require('axios');
        
//使用get请求获取数据
        
axios.get('https://unpkg.com/axios/dist/axios.min.js')
        
.then(res=>{
        
console.log(res.data)
        
})
        
.catch(err=>{
        
console.log('错误'+err)
        
})
       

2、如果要在浏览器使用 axios，直接可以使用 cdn 地址加载即可

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
       

实例

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
//使用 get 请求获取远程数据，浏览器执行远程 Ajax 请求会有跨域问题
        
axios.get('https://jsonplaceholder.typicode.com/posts')
        
.then(res=>{
        
console.log(res.data)
        
})
        
.catch(err=>{
        
console.log('错误'+err)
        
})
        
script>
       

四、请求配置

这些是创建请求时可以用的配置选项。只有url是必需的。如果没有指定method，请求将默认使用get方法。

       

        
//常用的配置项
        
{
        
// `url` 是用于请求的服务器 URL
        
url:'/user',
        

        
// `method` 是创建请求时使用的方法
        
method:'get',// default
        

        
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
        
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
        
baseURL:'https://some-domain.com/api/',
        

        
// `headers` 是即将被发送的自定义请求头
        
headers:{'X-Requested-With':'XMLHttpRequest'},
        

        
// `params` 是即将与请求一起发送的 URL 参数
        
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
        
params:{
        
id:12345
        
},
        

        
// `data` 是作为请求主体被发送的数据
        
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
        
data:{
        
name:'lisi'
        
},
        
}
       

全局的 axios 默认值

全局属性配置，即将属性中大量重复的内容抽离出来单独设置；

       

        
axios.defaults.baseURL='https://jsonplaceholder.typicode.com';
       

实例

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
//全局默认值设置，baseUrl 会自动在 url 前面添加
        
axios.defaults.baseURL='https://jsonplaceholder.typicode.com';
        
axios({
        
url:'/posts',
        
method:'get',
        
params:{
        
userId:1,
        
id:1
        
}
        
}).then(res=>{
        
console.log(res.data)
        
})
        
script>
       

五、并发操作

1、如果项目中可能会产生多个异步请求，它们会根据耗时长短来执行；

2、我们如果想让所有的异步请求后，按照指定的顺序进行执行，可以使用处理并发请求的助手函数

• axios.all(iterable)

• axios.spread(callback)

实例

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
//全局默认值设置，baseUrl 会自动在 url 前面添加
        
axios.defaults.baseURL='https://jsonplaceholder.typicode.com';
        
axios.all([
        
axios({
        
url:'users',
        
data:'1.异步'
        
}),
        
axios({
        
url:'users',
        
data:'2.异步'
        
}),
        
axios({
        
url:'users',
        
data:'3.异步'
        
})
        
]).then(value=>{
        
for(let i=0;i<value.length;i++){
        
console.log(value[i].config.data)
        
}
        
})
        
script>
       

上面循环获取相应的值，比较麻烦，所以 axios 提供了另一个解决方案

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
//全局默认值设置，baseUrl 会自动在 url 前面添加
        
axios.defaults.baseURL='https://jsonplaceholder.typicode.com';
        
axios.all([
        
axios({
        
url:'users',
        
data:'1.异步'
        
}),
        
axios({
        
url:'users',
        
data:'2.异步'
        
}),
        
axios({
        
url:'users',
        
data:'3.异步'
        
})
        
]).then(axios.spread((res1,res2,res3)=>{
        
console.log(res1.config.data)
        
console.log(res2.config.data)
        
console.log(res3.config.data)
        
}))
        
<script>
       

六、实例化

实例化，顾名思义就是 new 出一个对象来，这样这个对象具有独立性不被干扰；

可以使用自定义配置新建一个 axios 实例

实例

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
//自定义实例化对象
        
constmyAxios=axios.create();
        
myAxios.defaults.baseURL='https://jsonplaceholder.typicode.com';
        
myAxios({
        
url:'users'
        
}).then(res=>console.log(res.data))
        
script>
       

七、实例方法

以下是可用的实例方法。指定的配置将与实例的配置合并。

axios#request(config)

axios#get(url[, config])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

实例

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
axios.defaults.baseURL='https://jsonplaceholder.typicode.com';
        
//request请求 通用
        
axios.request({
        
method:'get',
        
url:'users'
        
}).then(res=>console.log(res.data))
        
script>
       

八、拦截器

1、所谓拦截操作，就是在 Ajax 获取数据之前先拦截处理一些事务的操作；

2、这些操作包括：修改 axios 配置信息，loading，判断验证跳转等等；

3、拦截处理完毕之后，再通过 return 返回基础处理即可；

       

        
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
        
<script>
        
//自定义实例化对象
        
constmyAxios=axios.create();
        
myAxios.defaults.baseURL='https://jsonplaceholder.typicode.com';
        

        
// 添加请求拦截器
        
myAxios.interceptors.request.use(function(config){
        
// 在发送请求之前做些什么
        
console.log('loading...');
        
returnconfig;
        
},function(error){
        
// 对请求错误做些什么
        
returnPromise.reject(error);
        
});
        

        
// 添加响应拦截器
        
myAxios.interceptors.response.use(function(response){
        
// 对响应数据做点什么
        
returnresponse;
        
},function(error){
        
// 对响应错误做点什么
        
returnPromise.reject(error);
        
});
        

        
myAxios({
        
url:'users'
        
}).then(res=>console.log(res.data))
        
script>