axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
安装
npm安装
$ npm install axios --save
通过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);
});
}
response.data才是真正返回的后台数据
发送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){});
response.data才是真正返回的后台数据
执行多个并发请求
//获得用户信息的请求
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请求时,参数的处理
- 下载安装第三方模块
qs -> npm install qs --save-dev
- 处理方式
// 第一种: 直接在发送的时候,对数据进行qs.stringify处理
// 缺点: 如果项目大,有大量的请求需要发送,那么一个一个加会很麻烦
axios.post("/checkLogin.php", qs.stringify({
name, pwd
}));
// 第二种: 使用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
});
vue脚手架配置
在根目录创建vue.config.js
在module.exports中配置devserver的内容
devServer: {
host:'0.0.0.0',
port: 8080,//端口号
open: true,//运行项目自启
proxy:{
'/api':{
target:'http://localhost:3000/',//跨域请求资源地址
ws:false,//是否启用websockets
changeOrigin:true,//开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{
'^/api':''//注册全局路径
}
}
}
},
因为顺手注册了全局路径,取资源就可以使用/api,例如:
this.$ajax.get(/api/personalized?limit=6
,{})
接口
修改 build/webpack.base.conf.js
var express =require('express');
var app=express();
var a=require('../static/a.json');
app.use('/list',(req,res,next)=>{
res.json(a);
})
app.use('*',(req,res,next)=>{
res.json({'err':'请求路径出错'});
})
app.listen(3000,(err)=>{
if(!err){
console.log('服务器运行成功')
}
})
static目录下创建json文件