一.axios简介
网址:axios中文网|axios API 中文文档 | axios
axios是一个基于Promise的http库,支持浏览器端和node.js端
-
从浏览器中创建 XMLHttpRequests
-
从 node.js 创建 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
自动转换 JSON 数据
-
客户端支持防御 XSRF
二.安装及配置
-
npm
npm i axios -S
三.跨域
只要前端向服务器发ajax请求,大概会发生跨域。
很多种方案触发:99%都是后端解决的。
-
cors 后端
-
修改服务器代理配置
-
jsonp(用的很少)
四.配置代理解决跨域: 仅是开发阶段而已
项目目录中u-shop/vue.config.js文件,这是vue脚手架的配置文件
module.exports = { //设置代理请求 devServer:{ proxy:{ "/api":{ target:"http://localhost:3000",//目标地址 "^/api":"" } } } } //设置代理请求 同一个项目配置多个地址 module.exports = { devServer: { proxy: { "/api1": { // 这是以/api开头的 target: "http://localhost:3000",//目标地址 ,vue脚手架会帮我们转发到这个地址 pathRewrite: { '^/api1': '/apiv1' // 这种接口配置出来 http://XX.XX.XX.XX:3000/api/login } }, "/api2": { // 这是以/api开头的 target: "http://localhost:3000",//目标地址 ,vue脚手架会帮我们转发到这个地址 pathRewrite: { '^/api2': '/apiv2' // 这种接口配置出来 http://XX.XX.XX.XX:3000/api/login } } } } } //一个项目中只有一个接口地址 module.exports = { //设置代理请求 devServer: { proxy: { "/api": { // 这是以/api开头的 target: "http://localhost:3000",//目标地址 ,vue脚手架会帮我们转发到这个地址 } } } } 重启项目: npm run serve
五.axios请求方式
-
get方式
axios.get( url?key=value ) axios.get( url ,{ params:{ } } ) axios.get("http://localhost:3000/api/getcates") .then(function(response) { //成功的回调 console.log(response,'ok'); //接口返回的数据在 response.data中。因为axios库把返回数据和请求的数据进行了二次包装 }) .catch(function(error) { //失败的回调 console.log(error); });
-
post方式
axio.post( url,{ 参数 } ) let result = await axios.post(api_url + "/api/register",{ phone:'15811111112',password:'123456',nickname:'鲁班' });
-
axios
-
get
let result = await axios({ url: api_url + "/api/getgoodsinfo", method: "get", params: { //parmas是axios方法决定的 id: 2 //这个参数是根据后端的接口文档来的 } });
-
post
let result = await axios({ url: api_url + "/api/register", method: "post", data: { phone: "15811111113", password: "123456", nickname: "鲁班小号" } });
-
返回结果的解释
{ config,前端发送ajax的请求头相关的所有配置信息 data,接口返回的内容 headers,如果需要设置请求头需要在这里设置,{ authorization:token字符串 } status,状态码 statusText,状态码对应描述 request,原生ajax的内容 }
baseURL
六.axios的基本应用
6-1get请求
-
局部引入
在某一个具体的.vue页面中引入axios
-
全局引入
在main.js中引入axios挂载到Vue的原型链上
import axios from 'axios' Vue.prototype.$axios = axios 在其它.vue页面可以通过this实例访问到 $axios方法。this.$axios async request1(){ // console.log( this.$axios ) let result = await this.$axios({ url: api_url + "/api/getgoodsinfo", method: "get", params: { //parmas是axios方法决定的 id: 2 //这个参数是根据后端的接口文档来的 } }); console.log(result, "$axios"); }
全局默认设置
axios.defaults.baseURL = 'http://localhost:3000';
6-2.post请求
-
注册
-
登录
七.axios.create() 了解
axios() 其实就是一个http请求的实例对象
axios.create可以用来自定义axios请求,相当于我们又封装了一个ajax方法
let http = axios.create({ baseURL: "http://localhost:3000" }); http({ url: "/api/getgoodsinfo", method: "get", params: { //parmas是axios方法决定的 id: 2 //这个参数是根据后端的接口文档来的 } })
八.执行多个并发请求
function getCates() { return axios.get(api_url + '/api/getcates'); } function getBanner() { return axios.get( api_url + '/api/getbanner' ); } axios.all( [getCates(), getBanner()] ) .then(axios.spread( (cates, banner)=> { // 两个请求现在都执行完成 console.log( cates, banner,'----多并发' ) }));
九.axios拦截器
总结:统一加些操作。比如:
每次打印一上请求地址、响应的结果
每次请求统一加上token
-
请求拦截器
// 请求拦截器 axios.interceptors.request.use(config=>{ return config })
<template> <div> <h2>拦截器</h2> <button @click="request1">发送请求</button> </div> </template> <script> import axios from 'axios' let api_url = 'http://localhost:3000' //1. 响应拦截 axios.interceptors.response.use( res=>{ //console.log(res,'响应拦截') console.group('-------------------------') console.log('本次请求地址为:' ,res.config.url) console.log('本次结果为:',res.data) console.groupEnd('-----') return res //否则后面拿不到结果 } ) //2. 请求拦截,可以统一设置请求的参数,比如统一在headers中加token //假设后端的所有接口要求 前端必须通过headers传递一个aa参数为123 axios.interceptors.request.use( config=>{ // console.log(config,'请求拦截') //config.headers.aa = 1234 config.headers.authorization = 'tokenstring' //登录成功后设置了token字符串到locastorage,从缓存中获取的 return config //必须return,否则请求信息不会发送给服务器 } ) export default { methods:{ async request1(){ let result = await axios.get(api_url + '/api/getcates'); //console.log(result,'request1触发了') }, async request2(){ } } } </script> <style> </style>
-
响应拦截器
// 响应拦截器 axios.interceptors.response.use(res=>{ return res }) axios.interceptors.response.use( res=>{ // console.log(res,'响应拦截') console.group('-------------------------') console.log('本次请求地址为:' ,res.config.url) console.log('本次结果为:',res.data) console.groupEnd('-----') return res //否则后面拿不到结果 } )
十.请求层的封装
-
get请求
let reqGet =(url,params={})=>{
return axios.get(url,{params})
}
-
封装post 请求
let reqPost =(url,params={})=>{
return axios.post(url,params)
}