Vue学习(10)-axios

一、axios基本使用

get/post

axios.get('/user?ID=12345') .then(response => { console.log(response); }) .catch(error => { console.log(error); }); // 可选地，上面的请求可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); //post，拼接的时候用data axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(response => { console.log(response); }) .catch(error => { console.log(error); });

执行多个并发请求

function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions => { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread((acct, perms) => { // axios.spread()是用来将axiosall返回的数组进行拆分的 // 两个请求现在都执行完成 }));

一些可以设置的全局默认配置

axios.defaults.baseURL = '默认地址'; axios.defaults.timeout = 5000

因为并不是全都会使用全局aixos，要针对不同的请求来进行不用的配置

//创建一个axios实例 const instance1 = axios.create({ baseURL: '默认地址', timeout: 5000 }) instance1({ url: '拼接地址' }).then(res => { console.log(res); })

对axios进行模块封装

防止日后axios出问题时维护困难

//request.js //封装axios import axios from 'axios'; export function request(config, success, failure) { //创建实例 const instance = axios.create({ baseURL: '', timeout: 5000 }) //发送网络请求 instance(config) .then( res => { success(res); } ) .catch( err => { failure(err); } ) } //.vue //组件调用 import {request} from "./network/request"; request({ url: '' }, res => { console.log(res); }, err => { console.log(err); })

再进一步封装

import axios from 'axios'; export function request(config) { return new Promise((resolve, reject) => { //创建实例 const instance = axios.create({ baseURL: '', timeout: 5000 }) //发送网络请求 instance(config) .then( res => { resolve(res); } ) .catch( err => { reject(err); } ) }) } import {request} from "./network/request"; request({ url: '', }).then(res => { console.log(res); }).catch(err => { console.log(err); })

因为instance返回的就是Promise，所以可以直接返回instance

//request.js import axios from 'axios'; export function request(config) { //创建实例 const instance = axios.create({ baseURL: '', timeout: 5000 }) //发送网络请求 return instance(config) }

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1