vue cli axios封装新芽-

1. 在根目录新建vue.config.js

module.exports={  devServer:{   open:true,   proxy: { '/member': {          target: "https://www.xxxx.com",//设置你调用的接口域名和端口号 别忘了加http          changeOrigin: true, }, } }} 

2. 新建utils 文件夹 request.js文件

import axios from 'axios' //qs parse 把序列化数据转为对象，stringify()把对象转为序列化数据 import qs from 'qs' //process.env  webpack的全局环境变量,产品|开发环境判断 根据不同的环境，设置不同的baseurl const BASEURL=process.env.NODE_ENV==='production'?'https://www.xxx.com':''; //创建axios实例  设置基础url和超时时间 let request=axios.create({  baseURL:BASEURL,  timeout:5000 }) //发起请求拦截 添加token头信息 //use 两个回调函数，第一个代表正确resolve,第二个回调函数代表错误reject //Promise.reject 再一次向上一级抛出一个reject错误 //发送请求前请求头headers添加token头信息 //每当axios发起请求时候，先执行use里面的回调函数 比如每次发起ajax请求 添加token，添加用户名 到header头信息里面 request.interceptors.request.use(  config=>{config.headers.token=localStorage.getItem("token");return config},  err=>Promise.reject(err) ) // 响应请求拦截 request.interceptors.response.use(  res=>{ //写一些业务逻辑，关闭加载提示，301 404 500等错误响应 return res; },  err=>Promise.reject(err) ) //// request是有方法 也是 对象 对象的属性是可以动态的添加（动态添加了一个方法叫postURL） //添加一个 postURL方法, // 最终返回的 当执行 postURL这个方法是最终返回的Promise对象的实例  // prosmie对象的实例 有两个结果 .then .catch（异步拿到-等待任意时间获取） 回调函数 成功  // .then 异步获取到 reslove 返回的数 // .catch 获取到 reject返回的 错误信息 request.postURL=function(url,data,options={}){ return new Promise(function(resolve,reject){ request({    url:url,    method:"POST",    data:qs.stringify(data), ...options,    headers:{"Content-Type":" application/x-www-form-urlencoded; charset=UTF-8",...options.headers} }) .then(res=>resolve(res)) .catch(err=>reject(err)) }) } export default request; 

3. 创建api文件夹 新建user.js

import request from '@/utils/request.js' //登录 function Login(data){ return request.postURL("/member/login.php",data) } //注销 function Exit(){ return request.postURL("/member/login.php") } //获取用户信息 function getUser(){ return request.get("/member/ajax.php") } export{  Login,  Exit,  getUser } 

• 例
• 登录

login(){ Login(this.user) .then(res=>{ //设置token在localstroge if(res.data.status==1){       localStorage.setItem("token",res.data.token) this.$router.replace("/user") } }) } 

• 获取信息

getUser(){ getUser() .then(res=>{ this.user=res.data      console.log(this.user) }) }, 

• 注销

logout(){ Exit() .then(res=>{ if(res.data.status==1){ this.user={}       localStorage.removeItem("token") } }) }