1、请求方式
axios(config)
// 发送 POST 请求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
别名请求
axios.request(config)
//原始的Axios请求方式 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }, timeout: 1000, ...//其他相关配置 });
axios.get(url[, config])
axios.get('demo/url', { params: { id: 123, name: 'Henry', }, timeout: 1000, ...//其他相关配置 })
axios.delete(url[, config])
//如果服务端将参数作为java对象来封装接受 axios.delete('demo/url', { data: { id: 123, name: 'Henry', }, timeout: 1000, ...//其他相关配置 }) //如果服务端将参数作为url参数来接受,则请求的url为:www.demo/url?a=1&b=2形式 axios.delete('demo/url', { params: { id: 123, name: 'Henry', }, timeout: 1000, ...//其他相关配置 })
axios.post(url[, data[, config]])
axios.post('demo/url', { id: 123, name: 'Henry', },{ timeout: 1000, ...//其他相关配置 })
axios.put(url[, data[, config]])
axios.put('demo/url', { id: 123, name: 'Henry', },{ timeout: 1000, ...//其他相关配置 })
axios.patch(url[, data[, config]])
axios.patch('demo/url', { id: 123, name: 'Henry', },{ timeout: 1000, ...//其他相关配置 })
参考文档:http://www.axios-js.com/zh-cn/docs/
2、网络模块的封装
封装:
import axios from 'axios' export function request(config) { // 1.创建axios实例 const instance = axios.create({ baseURL: 'http://123.207.32.32:8000', timeout: 5000 }) // 2.发送真正的网络请求 return instance(config) }
调用:
import { request } from './request' export function getHomeMultidata() { return request({ url: '/home/multidata' }) } export function getHomeGoods(type, page) { return request({ url: '/home/data', method: 'get', params: { type, page } }) }
3、拦截器
// 拦截器 // 请求拦截 instance.interceptors.request.use(config => { console.log('success'); // 等待图标,token验证等 return config }, err => { console.log('failed'); }) // 相应拦截 instance.interceptors.response.use(res => { console.log('success'); // 这里可以进行数据处理,只返回res.data等 return res }, err => { console.log('failed'); })