axios总结方法和封装

```javascript
```javascript
//axios总结方法
import axios from 'axios';
Vue.prototype.$http = axios
	created(){
		this.getJoks();
		this.getMoives()
		
	},
get方法
	getJoks(){
		this.$http.get("http://www.520mg.com/mi/list.php",{params:{page:2}}).then(res=>{
		console.log("get到的数据",res)	
		}).catch(err=>{
			console.log("出错原因",err)
		})	
		},

post方法
	getMoives(){
		this.$http.post("http://www.endata.com.cn/API/GetData.ashx",		"areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List",
		{
			headers:{"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}
		}).then(res=>{console.log("post数据请求",res)}).catch(err=>{
			console.log("出错原因",err)
		})	
		}
  
  post(url,k1=v1&k2=v2,
{headers:"Content-Type": "application/x www-form-
urlencoded; charset=UTF-8"}}
url-encoded
.then()
(序列化数据)
.catch
pdst(url,{k1:v1,k2:v2})
.then()
json日.catch)
post
post(url,formData)
.then)
file文件日.catch0



//目标:实现代理跨域
//同源策略:当进行ajax请求要求请求的页面与服务器地址必须同源
//
协议一致端口一致，域名一致，子域名一致
//
http://www.520mg. com:433/list/page . htmL
//
http协议www 子域名520ng.com 域名:433端口号
//什么是跨域:绕过浏览器的同源策略跨域吗请求到数据
//跨域的常见方法有:
//
1. jsonp (script 标签没有同源限制)
//
2.服务器响应头信息允许跨域
//
Access-Control -ALLow-Origin: *
//
3.本地服务器代理proxy

```javascript
//axios封装
// 需要先安装axios 和qs
npm install  axios -S
npm install qs -S

/* 封装axios方法 */
import axios from 'axios';
import qs from 'qs';
// 导入 qs parse 方法把序列化数据转对象  stringify方法 把对象转换为 需要序列化数据 {name:"mumu",age:18} 
// stringify 转序列化数据为 name=mumu&age=18
// parse把 name=mumu&age=18 转成{name:"mumu",age:18} 

const BASEURL =  process.env.NODE_ENV === 'production'?'https://www.xxxxx.com':'';
// 设置基础URL  (动态的根据当前的环境不一样,设置不一样的baseurl)
// process.env webpack的全局变量环境 产品|开发环境判断 给不同BASEURL

let request = axios.create({
	baseURL:BASEURL,
	timeout:5000
})
// 创建一个axios实例,设置实例的基础url和 超时时间

request.interceptors.request.use(
	config=>{config.headers.token = localStorage.getItem("token");return config},
	err=>Promise.reject(err)
)
// 发送请求的拦截 添加 token 头信息
// (每当是axios发起请求时候,先执行use里面回调函数方法,)
// (比如每次发起ajax请求 添加token，添加用户名 到header头信息里面)

request.interceptors.response.use(
	res=>{
		// 写一些业务逻辑  加载提示,301 404 500 等错误响应
		//  res.data.status ==1 ==2 ==3 响应的公共逻辑
		return res;
	},
	err=>Promise.reject(err)
)
// 响应请求拦截

request.postURL = function(url,data,option={}){
	return new Promise(function(resolve,reject){
		request({
			url:url,
			method:"POST",
			data:qs.stringify(data),
			...option,
			headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",...option.headers},				
		})
		.then(res=>resolve(res))
		.catch(err=>reject(err))
	})
}
//添加一个 postURL方法

export default request;

// 导出


//设置一个api
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200629191418825.png)
import request from '@/utils/request.js';
// 登录
function Login(data){
	return request.postURL("/member/index_login2.php",data);
}

// 注消
function Exit(){
	return request.postURL("/member/index_login2.php",{dopost:"exit"});
}

// 笑话请求
function GetJok(){
	return request.postURL("/mi/list2.php");
}

// 获取用户信息
function GetUser(){
	return request.get("/member/ajax_login.php")
}

 //使用
 import {Login} from '@/api/user.js'
	export default {
		data(){
			return {
				user:{fmdo:"login",dopost:"login",userid:"",pwd:""},
				}
		},
		methods:{
			login(){
				Login(this.user)
				.then(res=>{
					// 设置token 在 localstrage
					if(res.data.status==1){
						localStorage.setItem("token",res.data.token);
						if(this.$route.query.redirect){
							this.$router.replace(this.$route.query.redirect);
							// 如果有redirect查询参数 跳转到对应的页面
						}else{
							this.$router.replace("/user");
							// 默认跳转到用户中心
						}
						
					}
				})
			}
		}
	}

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020062919162935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYWlkdWJhbw==,size_16,color_FFFFFF,t_70)