一、axsos 简介
**1)、 特点:**
在浏览器中发送XMLHttpRequests请求
在node.js中发送http请求
支持Promise Api
拦截请求和响应
转换请求和响应数据 **2)、安装 axios 命令:** npm install axios --save **3)、在js文件中导入 axios 以及使用
import axios from 'axios'
//第一种 //axios 内部支持Promise的,也就是说在这可以直接使用then方法
axios({
url:'网络请求地址',
method:'Post', //如果不写请求方式,默认为get
params:{ 参数列表 }
}).then(res=>{ console.log(res) }));
//第二种
axios.get('请求地址',{
method:'',
params:{ 参数列表 }
}).then(res=>{ console.log(res) }));
//第三种
axios.post('请求地址',data:{参数列表},{ method:'' }).then(res=>{ console.log(res) }));
**4)、axios 的并发请求**
示例代码如下:
axios.all([axios(),axios()]).then(axios.spread((res1,res2)=>{ //res1 结果1 //res2 结果2 }))
**5)、axios的配置信息**
事实上在开发过程中有许多的参数是一样的,比如我们请求的URL前缀等;这个时候我们需要进行抽取,也可以利用**axios的全局变量进行设置,代码如下:
axios.defaults.baseURL = '公共的请求地址'; axios.defaults.timeout = '超时时间【单位是毫秒】';
**6)、axios的实例**
创建axios实例:
const instance = axios.create({ baseURL:'公共请求地址', timeout:超时时间【单位:毫秒】 });
instance ({ url:'具体的请求地址', method:'' }).then(res=>{ console.log(res) })
**7)、axios文件抽离以及拦截器的使用**
在项目的开发过程中为了减少组件对axios的依赖,我们会将axios抽离到单独的文件中进行封装,示例代码如下:文件目录:network/request.js
import axios from 'axios';
export const request = function (){
// 1、创建实例
const instance = axios.create({ baseURL:'公共地址', timeout: 超时时间【单位:毫秒】 }); //请求拦截
instance.interceptors.request.use(config=>{ return config; },err=>{ //处理异常 }) //响应拦截
instance.interceptors.response.use(config=>{ return config.data; },err=>{ //处理异常
})
//3 返回 Promise
retrun instance(config); };
组件中调用:
import request from './network/request';
const config = {
url:'请求具体地址',
method:'请求方式',//get方式的参数列表
params:{ 参数列表 } //post 请求方式的参数列表
data:{ 参数列表 } } //返回的是Promise类型 request(config).then(res= >{
//请求响应后的处理
}).catch(err=>{ //异常处理 })