axios请求封装

vue axios封装：
1、项目环境分为三种：
开发环境
测试环境
线上环境

2、基础用法：
安装axios
在页面中引入 import axios form 'axios"
get请求：

  axios.get("http://www.baidu.com",params:{pageNum:1,pageSize:10},header:{}).catch(error=>{console.log(error)})

最终生成的url:http://www.baidu.com/api?pageSize=10&pageNum=1
参数1：url 请求地址
参数2：传参
参数3：请求头

post 请求：

axios.post('http:www.baodu.com/api/login',{userName:'xiaoming',password:'1111'},{params:{a:123,b:'haha'}}).then(res=>{console.log(res)})```

put请求
axios.put()

delete请求：
axios.delete()

封装：
在src中创建文件夹 ：Utils->request.js

import axios from 'axios'
//创建一个axios对象
const instance = axios.create({
//baseUrl:会在发送请求的参数前面
	baseUrl='http://www.baidu.com',
	timeout:'5000'
})

//请求拦截
//所有的网络请求之前都会先执行此方法
instance.interceptors.request.use(
	function(config){
		config.headers.token='12345'  //token:是服务端约的好的，后端需要啥写啥
		return config
	}
	function(error){
		return Promise.reject(error)
	}
)

//响应拦截
//所有的网络请求返回数据之后都会先执行此方法
//此处可以根据服务器的返回的状态码做相应的处理：例如：404、401、500等
instance.interceptors.response.use(
	function(response){
		return response
	}
	function(error){
		return Promise.reject(error)
	}
)

//get请求
export function get(url,params){
	return axios.get(rul,{params});
}

//post请求
export function post(url,data){
	return axios.post(url,data);
}

//put请求
export function put(url,data){
	return axios.put (url,data)
}

//delete 请求
export function del(url){
	return axios.delete(url);
}

在没有创建axios对象之前 页面中使用方式:

import {get} form '../Utils/request.js'
get('http://www.baidu.com/api/login',{params:{}).then(res=>{})

在创建axios创建对象以后使用方式：

import {get} form '../Utils/request.js'
get('/api/login',{params:{}).then(res=>{})