概述： 1.axios：一个基于Promise用于浏览器和nodejs的HTTP客户端。本质是对ajax的封装。 特征： 从浏览器中创建XMLHttpRequest 从node.js发出http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF 2.安装 npm install axios import axios from "axios" 3.API 1 axios(config)
|
1 2 3 4 5 6 7 8 |
eg: axios({ method:"post", url:"/user", data:{ firstName:"nanhua", lastName:"qiushui" } }); |
2.axios(url,config) //默认为get请求 3.请求方法别名
|
1 2 3 4 5 6 7 |
axios.request(config) axios.get(url,config) axios.post(url,data,config) axios.delete(url,config) axios.head(url,config) axios.put(url,data,config) axios.patch(url,data,config) |
4.并发
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
自定义配置创建axios实例 var instance = axios.create({ baseURL:"https://some-domain.com/api/", timeout:1000, headers:{"X-Custom-Header":"foobar"} }) 自定义实例默认值 //创建实例时设置 //实例创建后修改默认值（设置全局axios默认值） axios.defaults.baseURL = "https://api.example.com"; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; 并发：axios.all(iterable) eg: axios.all([ axios.get("https://api.github.com/xxx/1"); axios.get("https://api.github.com/xxx/2"); ]).then(axios.spread(function(userResp,reposResp){ console.log("User",userResp.data); console.log("Repositories",reposResp.data); })) |
|
1 2 |
* 当所有的请求都完成后，会收到一个数组，它包含着响应对象，其中的顺序和请求发送的顺序相同，可以用<span class="hljs-selector-tag">axios</span><span class="hljs-selector-class">.spread</span>分割成多个单独的响应对象。 |
5.config参数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
baseURL: 'https://some-domain.com/api/', //将自动加在url前面，除非url是一个绝对URL //允许在向服务器发送前，修改请求数据 //只能用在PUT\POST\PATCH //后面数组的函数必须返回一个字符串/ArrayBuffer或Stream transformRequest:[function(data){ //对data进行任意转换处理 return data; }], //在传递给then/catch之前，允许修改响应数据 transformResponse: [function (data) { return data; }], //即将被发送的自定义请求头 headers:{ 'X-Requested-With': 'XMLHttpRequest' }, //即将与请求一起发送的URL参数 params:{ ID: 12345 }, //负责params序列化的函数 paramsSerializer:function(params){ return Qs.stringify(params,{arrayFormat: "brackets"}); }, //超时 timeout: 1000, //表示跨域请求时是否需要使用凭证 withCredentials: false, //允许响应内容的最大尺寸 maxContentLength: 2000, //对打重定向数目 maxRedirects:5, //是否启用长连接 httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), //代理服务器设置 proxy:{ host:"127.0.0.1", port: 9000, auth:{ username:"nanhuaqiushui", password:"Huawei@123" } } |
6.响应结构
|
1 2 3 4 5 6 7 |
{ data:{}, status:200, statusText:"OK", headers:{}, //服务器响应的头 config:{} //为请求提供的配置信息 } |
7.拦截器
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//请求拦截器 axios.interceptors.request.use(function(config){ //发送请求之前做些什么 return config; },function(error){ //请求错误之后做些什么 return Promise.reject(error); }) //响应添加拦截器 axios.interceptors.response.use(function(config){ //发送请求之前做些什么 return config; },function(error){ //请求错误之后做些什么 return Promise.reject(error); }) //移除拦截器 var myInterceptor = axios.interceptors.request.use(function(){ ... }) axios.interceptors.request.eject(myInterceptor); |
新兴实践
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
const service = axios.create({ baseURL: process.env.BASE_API, timeout: 100000 }) // 请求拦截器 service.interceptors.request.use( config => { config.headers['Content-Type'] = 'application/json' if (store.getters.token) { // 让每个请求携带token config.headers['Authorization'] = store.getters.token } return config }, error => { Toast.failed('网络异常，请检查网络连接') console.log(error) // for debug return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { const res = response.data if (res.code && res.code !== 200) { Toast.failed(res.message) } return response }, error => { Toast.failed('网络异常，请检查网络连接') return Promise.reject(error) } ) export default service |
from:https://www.cnblogs.com/nanhuaqiushui/p/10514122.html
View Details