VUE 数据请求和响应(axios)
1. 概述
1.1 简介
axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库，用于浏览器和 nodejs 的 HTTP 客户端。具有以下特征：
-
- 从浏览器中创建 XMLHttpRequests
- XMLHttpRequest对象用于在后台与服务器交换数据，可做到在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据或接收数据，在后台向服务器发送数据。所有的浏览器都支持XMLHttpRequest对象。
- 从 node.js 创建 http 请求
- 如get/post等
- 支持 Promise API
- 如promise所支持的链式回调，.then(res => {}).catch(err =>{})
- 拦截请求和响应
- 在请求之前或响应之后进行的处理，如请求之前增加统一的token标识，响应之后对公用的错误进行处理等。
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
- 从浏览器中创建 XMLHttpRequests
1.2 引入使用
npm install axios 进行安装，安装成功后 import axios from 'axios' 进行引入模块，再对axios对象进行设置。如
/** * 创建axios对象 **/ let axiosInstance =axios.create({ baseURL: configHttp.domain, withCredentials:true, });
备注：使用 Vue.prototype.$http = axios; 进行配置于vue项目中，在页面中可使用this.$http.get('xxxx').then().catch()。
1.3 常用请求配置
1.3.1 url
数据请求的服务器URL，此配置必须存在，否则无访问路径无法进行数据请求。
1.3.2 method
创建请求时使用的方法，默认get方式。有多种请求方式，如：request/get/delete/head/post/put/patch，常用get与post.
1.3.3 baseURL
设置一个统一的基础路径(如http://www.demo.com/api/)，使axios的get或post中的url使用相对URL，更改访问域名或端口号时只更改对应的baseURL值即可。
1.3.4 headers
headers是即将被发送的自定义请求头，可设置请求的数据标识(token)或post请求的数据类型等。
1.3.5 timeout
请求超时时间，单位为毫秒，若超过超时时间则请求中断。0表示无超时时间。
1.3.6 withCredentials
跨域请求时是否需要使用凭证，默认为false
1.4 配置的默认与自定义实例
优先级别为：自定义实例>全局默认值>自带默认值
1.全局默认值
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';
2.自定义实例
// 创建实例时设置配置的默认值 var instance = axios.create({ baseURL: 'https://api.example.com' }); // 在实例已创建后修改默认值 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
备注：也可在请求拦截中进行设置对应的配置。
1.5 拦截器
在请求或响应被 then 或 catch 处理前拦截他们，分为请求拦截器和响应拦截器；
-
- 请求拦截器(interceptors.request)是指可以拦截每次或指定HTTP请求，并可修改配置项。
- 响应拦截器()可以拦截每次HTTP请求对应的响应，并可修改返回结果项。
示意图：
一般在请求拦截器中增加标识token或其他请求配置，在响应拦截器中对统一错误或状态码进行处理(跳转统一页面如登录)
// 添加请求拦截器 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); });
2. 实例
2.1 axios配置
备注：在headers.post['Content-Type']不为application/json时，传递post参数时需使用querystring中的querystring.stringify对参数进行格式化处理。
import axios from 'axios' import configHttp from '../../configHttp' /** * 创建axios对象 **/ let axiosInstance =axios.create({ baseURL: configHttp.domain, withCredentials:true, }); /** * 访问请求拦截(在请求前处理) **/ axiosInstance.interceptors.request.use( function (config) { config.headers.common['Platform'] = 'web'; return config; }, function (error) { return Promise.reject(error) } ); /** * 响应请求拦截(在响应前处理) **/ axiosInstance.interceptors.response.use( function (response) { return response; }, function (error) { if(error.response){ let status=error.response.status; switch (status) { case 401: // 跳转至login break; } } //处理报错 记录日志 if (error !== undefined) { console.log(error); } } ); /** * http请求响应处理函数 **/ let httpResponseHandle = function(){ let self = this; let res = self.res; if (res.code == '0') { self.successCallback && self.successCallback(res); } else if (res.code == 'C00004' || res.code =='C00002') { // 清除token // 跳转至login } else { // 统一错误弹出 self.failCallback && self.failCallback(res); } }; let http= { /** * 以get方式请求获取JSON数据 * @param {Object} opts 配置项，可以包含以下成员： * @param {String} opts.url 请求地址 * @param {Object} opts.params 附加的请求参数 * @param {Function} opts.successCallback 成功的回调函数 * @param {Function} opts.failCallback 失败的回调函数 * **/ get: function (opts) { axiosInstance .get(opts.url, {params: opts.params}) .then(function (res) { opts.res = res.data; httpResponseHandle.call(opts); }) .catch(function (err) { if (err.response) { if (err.response.data) { opts.res = err.response.data; httpResponseHandle.call(opts); } else { // 统一错误弹出 } } }); }, /** * 以post方式请求获取JSON数据 * @param {Object} opts 配置项，可以包含以下成员： * @param {String} opts.url 请求地址 * @param {Object} opts.params 附加的请求参数 * @param {Function} opts.successCallback 成功的回调函数 * @param {Function} opts.failCallback 失败的回调函数 * **/ post: function (opts) { axiosInstance .post(opts.url, opts.params) .then(function (res) { opts.res = res.data; httpResponseHandle.call(opts); }) .catch(function (err) { if (err.response) { if (err.response.data) { opts.res = err.response.data; httpResponseHandle.call(opts); } else { // 统一错误弹出 } } }); } }; export default http;
2.2 实例调用
在Vue中使用prototype进行设置，不能使用use设置。
1.main.js中直接写入
import http from '@/common/js/http.js';
Vue.prototype.$http = http;
2.其他引入
import Vue from 'vue' import axios from '../common/js/http.js' Vue.prototype.$http = axios
2.3 页面使用
vue单页面中的methods中使用
1.get示例
this.$http.get({ url: 'comm/getDataInfo', params: { param1: xxx, param2: '3' }, successCallback: res => { // 数据处理 }, failCallback: res => {} });
2.post示例
this.$http.post({ url: 'common/userLogin', params: { username: 'admin', password: '123456' }, successCallback: res => { // 数据处理 }, failCallback: res => {} });
2.4 http请求Content-Type: application/x-www-form-urlencoded
接口使用x-www-form-urlencoded格式接收/传递数据时，需要使用qs(原来的querystring)对所传递的参数进行格式化处理；
1.设置数据格式
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
2.在请求拦截处统一处理参数格式化
config.data = qs.stringify(config.data)
import axios from 'axios' import qs from 'qs' const http = axios.create({ timeout: 15000, headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }) /** * 请求拦截器 */ http.interceptors.request.use(config => { const objParams = { appKey: 'ccc', bizContent: JSON.stringify(config.data), } config.data = qs.stringify(objParams) // objParams为传递参数 return config }, error => { Promise.reject(error) })
