1.Axios 是什么
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js
- 创建 http 请求
- 支持 Promise API 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
1.安装axios
$ npm install axios
2.在Vue中二次封装并使用
mian.js引入并挂载到Vue实例中
import axios from 'axios'
Vue.prototype.$axios = axios
2.1二次封装axios请求
在scr目录下新建utils文件夹,并在utils文件夹下新建request.js
import axios from 'axios';
let baseURL =
process.env.NODE_ENV == 'production' ? '生产环境' : '开发环境'
// 创建基础地址
const service = axios.create({
baseURL
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['apiToken'] = getToken()
}
return config
},
err => {
return Promise.reject(err)
}
)
service.interceptors.response.use(
res => {
if (response.status === 200) {
return res.data;
} else {
Promise.reject(res.data);
}
},
err => {
console.log(err);
return Promise.reject(err);
}
);
export default service;
2.2创建API请求
在src目录下新建api文件夹,并在此文件夹下新建index.js
// 引入request
import request from '../../utils/request'
// 审批表单
export const getApprovalForm = params => {
return request({
//请求地址,会自动匹配baseurl
url: '/approve/getApprovalForm',
// 请求方式
method: 'GET',
//请求参数
params
})
}
Vue页面使用
// 引入函数
import {getApprovalForm} from '../api/index.js'
// 接口请求方法
async getAppForm(){
let res = await getApprovalForm({id:1})
if(res.code == 0){
// code == 0请求成功
}
}