vue项目中axios的封装

1.安装

npm install axios --save

2.新建http.js，封装拦截器以及多种请求方式

import axios from 'axios'; import { Message } from 'element-ui'; // 请求拦截器 axios.interceptors.request.use( config => { //发送请求前需要做什么，一般检查token return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ) // 响应拦截器 axios.interceptors.response.use( response => { // 对响应数据做点什么,一般是判断状态码，进行一些逻辑处理 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error) ; }; ) //GET请求 export const $get = function (url, params) { return new Promise((resolve, reject) => { axios({ method: 'get',//请求方式 url: url, //请求url headers:... //请求头设置, params, //请求参数 baseURL: ...//基础地址,将自动加在 `url` 前面 }).then(res => { resolve(res) }).catch(error => { reject(error) }) }) } //POST请求 export const $post = function (url, param) { return new Promise((resolve, reject) => { axios({ method: 'post', url: url, headers: ..., data: param ? param : "", //数据体 baseURL: ... }).then(res => { resolve(res) }).catch(error => { reject(error) }) }) } //DELETE请求 export const $delete = function (url, params) { return new Promise((resolve, reject) => { axios({ method: 'delete', url: url, headers: ..., params, baseURL: ... }).then(res => { resolve(res) }).catch(error => { reject(error) }) }) } //PUT请求 export const $put = function (url, params) { return new Promise((resolve, reject) => { axios({ method: 'put', url: url, headers: ..., data: params ? params : "", baseURL: ... }).then(res => { resolve(res) }).catch(error => { reject(error) }) }) }

3.接口的封装---新建user.js

//导入请求方式 import { $get, $post, $update, $delete } from '../http'; //获取用户信息接口 const getUser = data => { return $get('/api/getUserInfo', data); }; //其他接口类似 .... .... .... //导出接口 export default { getUser, ..., ... }

4.封装所有接口文件---创建index.js

//导入接口文件 import user from './user' //导出 export default { user, ..., ... }

5.axios的所有内容封装（该index.js即为下图目录结构选中的js文件）

目录结构

6.在组件中的使用

methods:{ //方法的调用，传入数据 getUser(){ this.$api.user.getUser({userId：100010}) .then( res=>{ //请求结果，进行相应的逻辑处理 }, error=>{ //请求失败后的逻辑处理 }) } }