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=>{})