当前位置 博文首页 > BeautifulGirl230：Vue封装axios
axios 是一个基于 promise 的HTTP库。promise API。JSON 数据node.js 创建 http 请求使用npm:
npm install axios --save
使用yarn
yarn add axios
使用CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
创建 request.js 文件，在文件中映入 axios
import axios from "axios"
方式一：axios.defaults 全局配置
axios.defaults.baseURL = 'http://localhost.com/api/';
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.timeout = 10000;
方式二：使用axios.create([config]) 创建实例。
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分： http://localhost.com/api/
baseURL: process.env.Vue_APP_BASE_API,
// 请求头部
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
// 超时时间
timeout: 10000,
})
export default service
service.interceptors.request.use(config => {
// 在发送请求之前的处理；比如：设置请求头部Token
config.headers['token'] = "token...";
return config
}, error => {
// 对请求错误的处理
Promise.reject(error)
})
service.interceptors.response.use(res => {
// 对响应数据做处理
return res.data
},error => {
// 对响应错误做处理
switch (error.response.status) {
case 401:
// 对401的操作
break;
case 408:
// 对408的操作
break
case 500:
// 对500的操作
break
default: Promise.reject(error)
}
})
创建 api.js 文件，在文件中引入 request.js，并设置API接口
import request from '@/utils/request'
export function userList(data,qurey) {
return request({
url: '/user', // 接口地址
method: 'POST', // 请求方式
data: data, // 需要发送个服务去的数据
params: qurey // url地址拼接的数据
})
}
在 user.vue 中引入API，在methods发送请求
import {userList} from '@/api/api'
data() {
return {
// 发送个服务器的数据
form:{
username: "Tom",
password: "123456"
},
qurey: {
page: 1,
limit: 10
}
}
},
methods: {
getUserList() {
userList(this.form,this.qurey).then(response => {
// 对请求返回的数据做处理
})
}
