axios常用方式:
axios({ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认是 get // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `transformRequest` 允许在向服务器发送前,修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream transformRequest: [function (data) { // 对 data 进行任意转换处理 return data; }], // `transformResponse` 在传递给 then/catch 前,允许修改响应数据 transformResponse: [function (data) { // 对 data 进行任意转换处理 return data; }], // `headers` 是即将被发送的自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是即将与请求一起发送的 URL 参数 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象 params: { ID: 12345 },// `data` 是作为请求主体被发送的数据 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' // 在没有设置 `transformRequest` 时,必须是以下类型之一: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属:FormData, File, Blob // - Node 专属: Stream data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeout` 的时间,请求将被中断 timeout: 1000, // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // 默认的 );
2、创建axios实例
请求公共部分
const instance =axios.create({ baseUrl:'http://www.com',
timeout:1000, })
不同的部分将配置作为参数传递到instance中
instance(config)
config:{url,data||params,method}
instance({url,data||params,method})
3、基础封装
export function request(config){ //创建axios实例 const instance = axios.create({ baseUrl:' ', timeOut:1000, }) // 添加请求拦截器 instance .interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 instance .interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); return instance(config) }
4、使用
import {request} from '@/request' //get请求?param=1&&.. export function ExampleInter (data){
return request({ method:'get', params:data, url:''
}) } //get请求url/1/2 export function ExampleInter (data){
return request({ method:'get', url:`url/${data.id}/${data.ids}` }) } //post请求 export function ExampleInter (data){ return request({
method:'post', data, url:''
}) }
import axios from 'axios' import Qs from 'qs' import store from '@/vuex/store' import Router from '@/router/index' import { Message } from 'element-ui'; export function request(config){ // console.log("baseUrl",baseUrl.uploadUrl); const instance =axios.create({ baseURL:baseUrl.uploadUrl, timeout:5000, transformRequest: [function (data) { // 对 data 进行任意转换处理 return Qs.stringify(data) }], }) instance.interceptors.request.use((config)=>{ // console.log("config",config); let token=store.state.token?store.state.token:sessionStorage['token']; if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token config.headers.token = token; // console.log('interceptors config=',config) } // this.$store.commit('') //一般在这之前对config做处理 return config;//config为请求配置,须返回config },function(error){}) // console.log('dddd',store.state.isShowMessage) instance.interceptors.response.use((response)=>{ // console.log("response",response) // console.log('dddd',store.state.isShowMessage) if(response.data.errcode=="500405"){ Router.push('/login'); } // console.log(re) if(store.state.isShowMessage&&!response.data.ret){ console.log("response error"); store.commit('setIsShowMessage',false); Message.error( { showClose: true, message: response.data.errmsg, type: 'error', onClose:function(){ store.commit('setIsShowMessage',true) } } ) return false; } return response },function(error){ console.log("error",error) }) return instance(config); }