Quantcast
Channel: CodeSection,代码区,网络安全 - CodeSec
Viewing all articles
Browse latest Browse all 12749

axios的基本使用

0
0

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的 axios

基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用

版本 v0.15.3

功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 自动转换 JSON 数据 客户端支持保护安全免受 XSRF 攻击 请求方式 axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) get请求

axios .get('/user',{ params:{id: 12} }) .then(res=>{ console.log(res) }) .catch(err=>{ console.log(err) })

post请求

axios .post('/user',{id: 12}) .then(res=>{ console.log(res) }) .catch(err=>{ console.log(err) })

发送并发请求 axios .all([axios.get('/profile'), axios.post('/user')]) .then(axios.spread((res1, res2)=>{ console.log(res1) console.log(res2) })) axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

直接通过配置发送请求,类似于 $.ajax(config)

axios(config) / axios(url,[config])

axios({ url:'/user', method: 'post', data:{ id: 1 }, }) axios('/user/12')

axios实例 实例配置

使用自定义的配置创建一个axios实例

var axiosIns = axios.create({ baseURL: '', timeout: 60000, headers: {'X-Custom-Header': 'foo'} })

axiosIns.get/post/delete/put/patch/head 都可以共用实例配置

请求配置 { // 请求地址 url: '/user', // 请求类型 method: 'get', // 请根路径 baseURL: 'http://www.mt.com/api', // 请求前的数据处理 transformRequest:[function(data){}], // 请求后的数据处理 transformResponse: [function(data){}], // 自定义的请求头 headers:{'x-Requested-With':'XMLHttpRequest'}, // URL查询对象 params:{ id:12 }, // 查询对象序列化函数 paramsSerializer: function(params){ } // request body data: { key: 'aa'}, // 超时设置s timeout: 1000, // 跨域是否带Token withCredentials: false, // 自定义请求处理 adapter: function(resolve, reject, config){}, // 身份验证信息 auth: { uname: '', pwd: '12'}, // 响应的数据格式 json / blob /document /arraybuffer / text / stream responseType: 'json', // xsrf 设置 xsrfCookieName: 'XSRF-TOKEN', xsrfHeaderName: 'X-XSRF-TOKEN', // 下传和下载进度回调 onUploadProgress: function(progressEvent){ Math.round( (progressEvent.loaded * 100) / progressEvent.total ) }, onDownloadProgress: function(progressEvent){}, // 最多转发数,用于node.js maxRedirects: 5, // 最大响应数据大小 maxContentLength: 2000, // 自定义错误状态码范围 validateStatus: function(status){ return status >= 200 && status < 300; }, // 用于node.js httpAgent: new http.Agent({ keepAlive: treu }), httpsAgent: new https.Agent({ keepAlive: true }), // 用于设置跨域请求代理 proxy: { host: '127.0.0.1', port: 8080, auth: { username: 'aa', password: '2123' } }, // 用于取消请求 cancelToken: new CancelToken(function(cancel){}) } 响应的数据结构

{ data: {}, //服务器返回的数据 status: 200, statusText: 'OK', headers: {}, config: {} }

全局配置

应用于所有请求

axios.defaults.baseURL = ‘ http://www.mt.com/api ‘

axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’; 拦截请求与响应

在 then 或 catch 之前拦截处理

// 请求拦截 axios.interceptors.request.use(function (config){ // 处理请求之前的配置 return config; }, function (error){ // 请求失败的处理 return Promise.reject(error); }); // 响应拦截 axios.interceptors.response.use(function (response){ // 处理响应数据 return response; }, function (error){ // 处理响应失败 return Promise.reject(error); });

错误处理

axios.get('/user/12345') .catch(function (error) { if (error.response) { // 服务器返回正常的异常对象 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else { // 服务器发生未处理的异常 console.log('Error', error.message); } console.log(error.config); });

取消请求

var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // handle error } }); // 取消请求 source.cancel('Operation canceled by the user.');

var CancelToken = axios.CancelToken; var cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c){ cancel = c; }) }); // 取消请求 cancel();

qs模块

用于处理URL查询参数

var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));

更详细更新的文档请参考 axios github


Viewing all articles
Browse latest Browse all 12749

Latest Images

Trending Articles





Latest Images