在浏览器中发送XMLHttpRequests请求
在node.js总发送http请求
支持Promise API
拦截请求和相应
转换请求和响应数据
axios请求方式支持多种请求方式
axios(config) axios.request(config) axios.get(url[,config]) axios.delete(url[,config]) axios.head(url[,config]) axios.post(url[,data[,config]]) axios.put(url[,data[,config]]) axios.patch(url[,data[,config]]) 安装、使用axios框架npm install axios --save
之后在main.js
import Vue from 'vue' import App from './App' import axios from 'axios' Vue.config.productionTip = false new Vue({ el: '#app', render: h => h(App) }) // 这里默认使用axios(config)方法 axios({ url:'服务器地址', method:'post' // 请求方法 默认为get }).then(res => { console.log(res); // 返回promise }) axios({ url:'服务器地址', // 专门get请求的参数拼接 params:{ type:'pop', page: 1 } }).then(res => { console.log(res); }) 发送并发请求使用axios.all 可以放入多个请求数组
axios.all([])返回的结果是一个数组，使用axios.spread可以将数组[res1,res2]展开
同样是在main.js下
import Vue from 'vue' import App from './App' import axios from 'axios' Vue.config.productionTip = false new Vue({ el: '#app', render: h => h(App) }) axios.all([axios({ url:'服务器地址' }),axios({ // 专门get请求的参数拼接 params:{ type:'pop', page: 3 } })]).then(result => { console.log(result); console.log(result[0]); console.log(result[0]); }) /* 使用axios.spread展开result */ axios.all([axios({ url:'服务器地址' }),axios({ // 专门get请求的参数拼接 params:{ type:'pop', page: 3 } })]).then(axios.spread((res1, res2)) => { console.log(res1); console.log(res2); }) 对公共部分的抽取事实上，开发中很多参数是固定的，可以进行抽取或者axios的全局配置
import Vue from 'vue' import App from './App' import axios from 'axios' Vue.config.productionTip = false new Vue({ el: '#app', render: h => h(App) }) // 公共配置 axios.defaults.baseURL = '地址' axios.defaults.timeout = 100 // 请求访问超时时间 axios({ // baseURL: , 也可以写在这里 url:'服务器地址', method:'post' // 请求方法 默认为get }).then(res => { console.log(res); // 返回promise }) 常见的配置选项用到再去查文档
方法 语法请求地址 url:'/user',
请求类型 method:'get',
请求根路径 baseURL:‘地址’,
请求前的数据处理 transformRequest:[function(data){}],
请求后的数据处理 transformResponse:[function(data){}],
自定义请求头 headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象 params:{id:123},
查询对象序列化函数 paramsSerializer:function(params){}
request body data:{key:'aa'},
超时设置s timeout:1000,
跨域是否带token withCredentials:false,
自定义请求处理 adapter:function(resolve,reject,config){},
身份验证信息 auth:{uname:'',pwd:'12'},
响应数据格式 json/blob/docuent/arraybuffer/text/stream responseType:'json',
创建对应的axions实例 import Vue from 'vue' import App from './App' import axios from 'axios' Vue.config.productionTip = false new Vue({ el: '#app', render: h => h(App) }) // 创建第一实例 const instance1 = axios.creat({ baseURL: '服务器地址', timeout: 1000 }) instance1({ url: '与服务器地址拼接的后续地址' }).then(res => { console.log(res); }) instance1({ url: '可以与上面实例不同的后续地址', params:{ type: 'pop', page: 1 } }).then(res => { console.log(res); }) //创建不同配置的实例 const instance2 = axios.creat({ baseURL: '地址', timeout: 10000, headers: {} }) 封装网络请求模块
正常在app.vue下复用性很低的请求网络数据
<template> <div> <div>{{result}}</div> </div> </template> <script> import axios from 'axios' export default{ name:'App', components:{ }, data(){ return{ result:'' } }, created(){ axios({ url:'服务器地址' }).then(res => { console.log(res); this.result = res; }) } } </script>建立network文件夹，并在其中创建request.js的请求配置
import axios from 'axios' /******************************/ // 方法1 // /*****************************/ export function request(config, success, failure){ // 1. 创建axios的实例 const instance = axios.creat({ baseURl: '服务器地址', timeout: 100 }) // 发送真正的网络请求 instance(config) .then(res => { //console.log(res); success(res) }) .catch(err => { //cnsole.log(err); failure(err) }) } /******************************/ // 方法2 // /*****************************/ export function request(config){ // 1. 创建axios的实例 const instance = axios.creat({ baseURl: '服务器地址', timeout: 100 }) // 发送真正的网络请求 instance(config.baseConfig) .then(res => { //console.log(res); config.success(res) }) .catch(err => { //cnsole.log(err); config.failure(err) }) } /******************************/ // 方法3 promise 方法【推荐】 // /*****************************/ export new Promise((resolve, reject) => { // 1. 创建axios的实例 const instance = axios.creat({ baseURl: '服务器地址', timeout: 100 }) // 发送真正的网络请求 instance(config) // 这里或者直接 return instance(config) 这里返回值为就为promise .then(res => { resolve(res) }) .catch(err => { reject(err) }) }