vue axios

水深无声 2022-12-22 00:56 176阅读 0赞

> vue中官方的请求方法

##### 一、基本用法 #####

1.  `axios(options)` 或 `axios.request(options)`  
    （1）这两个是一样的  
    （2）options 可以配置 method, headers, url, data 等属性  
    （3）返回结果是一个 `Promise` 实例
2.  指定请求方法  
    （1）`axios.get(url, options?)`  
    （2）`axios.post(url, data, options?)`  
    （3）`axios.head(url, options?)`  
    （4）`axios.put(url, data, options?)`  
    （5）`axios.patch(url, data, options?)`  
    （6）`axios.delete(url, data, options?)`
3.  并发请求 `axios.all([])`（或者使用`Promise.all` 或 `Promise.race`）
    
        // axios.all返回的是一个响应列表，也可以使用axios.spread()队列表进行解构
        axios.all([axios.get(url1),
        		   axios.post(url2, data)])
              .then(axios.spread((res1, res2)=>{ 
                console.log(res1)
                console.log(res2)
              }))

##### 二、全局axios配置（待学习补充） #####

1.  `axios.defaults`

（1）`axios.defaults.baseURL = 'http://127.0.0.1:8080'`

axios.defaults.baseURL = 'http://127.0.0.1:8080'
    axios.get('/hello');	// 请求url会被构建成：http://127.0.0.1:8080/hello
    axios.get('http://127.0.0.1:8080/hello');	// 也可以正常发送请求
    axios.get('127.0.0.1:8080/hello');			// url变成 http://127.0.0.1:8080127.0.0.1:8080/hello，请求错误

（2）`axios.defaults.timeout= 5000`

##### 三、跨域 #####

1.  封装jsonp
2.  封装cors

##### 四、拦截器 #####

1.  请求拦截器 `axios.interceptor.request(config, err)`
    
        axios.interceptor.request(config => { 
        	// config: 请求配置信息，包括请求头、请求url、请求数据...
        	console.log('请求拦截器--config', config);
        	// 必须返回config，否则请求将会被拦截
        	return config;
        }, err => { 
        	// err: 错误信息
        	console.log('请求拦截器--err', err);
        	return err;
        })
2.  响应拦截器 `axios.interceptor.response(res, err)`
    
        axios.interceptor.response(res => { 
        	// res: 响应内容(与then(res=>{})获取的res相同)
        	console.log('响应拦截器--res', res);
        	// 必须返回res，否则then(res=>{})中获取的res将变为undefined
        	return res;
        }, err => { 
        	// err: 错误信息
        	console.log('请求拦截器--err', err);
        	// 必须返回err，否则catch(err=>{})中获取的err将变为undefined
        	return err;
        })