vue cli axios封装

2020-06-30 17:01:35 阅读：199 来源： 互联网

标签：axios cli res request token vue reject data

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

新建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;

创建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")
					}
				})
			}

标签：axios,cli,res,request,token,vue,reject,data
来源： https://blog.csdn.net/hhhhhhhhhtr/article/details/107026140

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue cli axios封装