Vue学习笔记 —— axios

什么是axios？

axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。主要用来实现ajax与后端服务器的数据交互。

axios具有有以下特征：

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

安装

$ npm install axios $ cnpm install axios //taobao源 $ bower install axios // 或者使用cdn <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

发送GET请求

// created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中 created(){ axios.get('api/getData.php',{ // 还可以直接把参数拼接在url后边 params:{ title:'眼镜' } }).then(function(res){ this.goodsList = res.data; }).catch(function (error) { console.log(error); }); }

发送POST请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

补充：如果发送请求时，传递的参数是对象，那么可用如下方式传参数

var params = new URLSearchParams(); params.append('title', '眼镜'); params.append('id',1); axios.post('/user', params) .then(function(res){}) .catch(function(error){});

执行多个并发请求

//获得用户信息的请求 function getUserAccount() { return axios.get('/user/12345'); } //获取用户许可证的请求 function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all( [ getUserAccount(), getUserPermissions() ] ) .then(axios.spread(function (acct, perms) { //两个请求现已完成 }) );

请求拦截器

//请求拦截器 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); } );

Vue中axios在发送POST请求时，参数的处理

//使用axios.create创建一个新的axios实例，统一对数据进行处理, 同时也借助qs模块 const Axios = axios.create({ baseURL: '/api', transformRequest: [function (data) { const d = qs.stringify(data) return d; }] }) Axios.post("/checkLogin.php", { name, pwd });

封装

import axios from 'axios' import qs from 'qs' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头 axios.defaults.baseURL = ''; //配置接口地址 //POST传参序列化(添加请求拦截器) axios.interceptors.request.use((config) => { //在发送请求之前做某件事 if(config.method === 'post'){ config.data = qs.stringify(config.data); } return config; },(error) =>{ console.log('错误的传参') return Promise.reject(error); }); //返回状态判断(添加响应拦截器) axios.interceptors.response.use((res) =>{ //对响应数据做些事 if(!res.data.success){ return Promise.resolve(res); } return res; }, (error) => { console.log('网络异常') return Promise.reject(error); }); //返回一个Promise(发送post请求) export function fetchPost(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response); }, err => { reject(err); }) .catch((error) => { reject(error) }) }) } //返回一个Promise(发送get请求) export function fetchGet(url, param) { return new Promise((resolve, reject) => { axios.get(url, {params: param}) .then(response => { resolve(response) }, err => { reject(err) }) .catch((error) => { reject(error) }) }) } export default { fetchPost, fetchGet, }