一、介绍
大家都知道，在Jquery中，我们使用的是它封装的$ajax来与后端交互数据,在vue框架中而推荐的是axios,Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中(http://www.axios-js.com/zh-cn/docs/)。
1.浏览器中创建XMLHttpRequests
2.从node.js中创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换JSON数据
8.客户端支持防御XSRF
二、安装
npm install axios;
yarn add axios;
三、基本用法
在项目中一般会创建一个request.js文件，通过创建一个axios实例，来封装请求，主要运用拦截器做统一处理
1.请求拦截器：会在这里处理request，比如配置token写入头信息中。
2.返回拦截器：会在这里处理response，对http状态码做统一处理。
注意：axios默认为json格式，如果采用form格式需要单独引入qs包
//首先我们来创建一个Axios实例
var axiosIns = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-product': 'h5'}
});
// 请求拦截器（伪代码）
service.interceptors.request.use(config => {
const { userToken } = store.state
if (userToken) {
config.headers.Authorization = `Bearer ${userToken.token}`
}
return config
}, error => {
Promise.reject(error)
})
//设置response拦截器（伪代码）
service.interceptors.response.use(
response => {
return response
},
async err => {
switch (err.response.status) {
case 400:
err.message = '不支持的参数(400)'
break
case 401: {
let { userToken } = store.state
if (!userToken || !userToken.token) {
return router.replace({
path: '/login',
query: {
// currentRoute：表示当前路由
redireact: router.currentRoute.fullPath
}
})
}
break
case 404:
err.message = '被访问资源不存在(404)'
break
case 500:
err.message = '服务端内部错误(500)'
break
}
Toast.fail(err.message)
return Promise.reject(err)
}
)
四、项目中api管理
脑补一下后台给出的文档，如果后台不傻的话给出的文档肯定分模块的，假设后台给出的文档分为了以下几个模块，例如
资讯模块
问答模块
专栏模块
讲堂模块
圈子模块
发现模块
个人信息模块
用户登录注册模块
...还有其他很多
一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用，这样也便于api的维护，在src目录下创建一个apis文件夹，然后根据项目大小按照模块划分api
五、项目中跨域
1.Vue-cli3 搭建Vue 项目，创建出的项目和以往的有了很多的变化，目录及命令有也是。尤其是config文件夹已经没有了。而项目中最简单都需要开发环境(dev)和线上环境(pro)
那么我以往中需要在config中文件一些生产环境，或者跨域处理现在得自己在根目录下创建了。 在开发环境中一般要处理跨域
1 创建普通全局变量 .env
2 创建开发环境变量 .env.development
3 创建生产环境变量 .env.production
(1) vue-cli3的devServer
跨域请求devServer代理几种配置
1：先在项目的根目录下新建 vue.config.js 文件
2：在module.exports内设置devServer来处理代理
module.exports = {
devServer: {
proxy: {
'/v1': {
target: 'http://192.168.1.33:9888', // 目标地址
changeOrigin: true, //是否跨域
ws: true,
//重写路径 需要设置重写的话，要在后面的调用接口前加上/v1 来代替target
pathRewrite:{
// '^/v1': '',
}
// 可配置多个，如果路径有多个的话
// '/v2': {
// target: 'http://192.168.1.33:9888', // 目标地址
// changeOrigin: true, //是否跨域
// ws: true,
//重写路径 需要设置重写的话，要在后面的调用接口前加上/v2 来代替target
// pathRewrite:{
// '^/v2': '',
// }
}
}
}
}
如果项目用的是axios，则在axios中配置，只要将baseURL配置为空字符串''，参考链接： 代理跨域
axios.create({ baseURL:'' })
如果axios的baseURL配置为'/v1'， 那么需要在proxy中重写路径， 否则不能跨域
pathRewrite:{
'^/v1': '',
}
如果想要代理所有路径，那么可以在proxy中配置（将'/v1'改为'/）：
proxy: {
'/': { // '/'匹配所有路径，所有请求都会被代理
target: 'http://192.168.1.33:9888',
changeOrigin: true,
ws: true
}
}
3：后端开启cors跨域，配置header头信息，开启白名单
// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");
// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true");
// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
