一、vue的接口封装： 1. 引入axios封装方法（config.js） 2. 封装接口(userApi.js)，代码如下： import request from './config.js' export function userData(data){ return request({ url:'您的url地址', method:'get', data:data }) } 3. 在vue文件使用这个封装方法。（user.vue），代码如下： import { userData } from '../../api/userApi.js'getAllUser() { let token = sessionStorage.getItem('token') let header_token = { Authorization: "bearer " + token } userData({header_token}).then(res => { console.log("获取用户详情", res); }) }// 注意：这里导入只能是import { userData,方法名1,方法名2 } from '../../api/userApi.js',不能使用 import 自定义名字 from '../../api/userApi.js// 再次注意：下面使用的时候只能是：方法名(data).then(res => {}).catch(err => {}) 不能使用自定义名字.方法名

二、post，get，delete，put方法封装 1.文件名字为：config.js，代码如下： `/ 引入axios import axios from 'axios' // 引入qs import qs from 'qs' // 封装 get, post, delete, put方法 /**

三、vue里面的axios封装，代码如下： `// 引入axios import axios from 'axios'

// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 创建一个axios实例 const service = axios.create({ // 请求超时时间 timeout: 3000, // baseURL: 'http://' // baseURL : '/oauth' // baseURL : '/' })

// 添加请求拦截器 service.interceptors.request.use(config => { //config是axios配置对象 // 在发送请求之前做些什么 //每次发送请求前都会进入此拦截器处理函数，可以在此处统一携带上token，每次请求都会自 // config.headers.common['token'] = localStorage.getItem(“token”); let token = window.sessionStorage.getItem('token') config.headers.common['Authorization'] = 'bearer '+token; console.log("config是axios配置对象", config) return config; }, err => { // 对请求错误做些什么 console.log("请求出错的处理函数", err); return Promise.reject(err) } )

// 添加响应拦截器 service.interceptors.response.use(function(response){ // 对响应数据做点什么 //收到响应后，可以先统一处理错误码 // switch (res.data.code) { // case 10001: alert(‘非法操作’); // router.push({path: '/}); // case 10002: alert(‘权限不足’); // ...... // } let res={} res.status = response.status res.data = response.data return res },function(err){ // 对响应错误做点什么 //响应出错进入的函数 console.log("请求出错的处理函数",err); return Promise.reject(err) })

export default service`

四、vue的get请求的四种方法