安装依赖
npm install axios --save
注意:文件名不要和axios一样,可以去package.json里面修改name
请求方式axios(config)
main.js中导入import axios from "axios";
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'get'
}).then(res => {
console.log(res)
})
axios发送并发请求
//返回的结果是数组
axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'sell',
page: 3
}
})]).then(res => {
console.log(res)
})
//spread将数组[res1,res2]展开为res1,res2
axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'sell',
page: 3
}
})]).then(axios.spread((res1,res2) => {
console.log(res1)
console.log(res2)
}))
全局配置(抽取公共的)
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([axios({
url: '/home/multidata'
}),axios({
url: '/home/data',
params: {
type: 'sell',
page: 3
}
})]).then(axios.spread((res1,res2) => {
console.log(res1)
console.log(res2)
}))
创建对应的axios实例(多个ip地址)
const instance1 = axios.create({
baseURL : 'http://123.207.32.32:8000',
timeout : 5000
})
instance1({
url: '/home/multidata'
}).then(res => {
console.log(res)
})
instance1({
url: '/home/data',
params: {
type: 'pop',
page: 3
}
}).then(res => {
console.log(res)
})
const instance2 = axios.create({
baseURL : 'http://321.207.32.32:8000',
timeout : 10000
})
instance2({
url: '/home/multidata'
}).then(res => {
})
封装
方法1:回调函数
/***requst.js封装***/
import axios from "axios";
export function requst(config, success, failure) {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//2.发送真正的网络请求
instance(config).then( res => {
success(res)
}).catch( err => {
failure(err)
})
}
/***main.js使用***/
import { requst } from "./network/requst";
requst({
url: '/home/multidata'
}, res => {
console.log(res)
}, err => {
console.log(err)
})
方法2:promise(推荐)
/***requst.js封装***/
import axios from "axios";
export function requst(config) {
return new Promise( (resolve, reject) => {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//2.发送真正的网络请求
instance(config).then( res => {
resolve(res)
}).catch( err => {
reject(err)
})
})
}
/***main.js使用***/
import { requst } from "./network/requst";
requst({
url: '/home/multidata'
}).then( res => {
console.log(res)
}).catch( err =>{
console.log(err)
})
方法3:promise(最终)
/***requst.js封装***/
import axios from "axios";
export function requst(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//2.发送真正的网络请求
return instance(config) //instance返回值就是promise
}
/***main.js使用***/
import { requst } from "./network/requst";
requst({
url: '/home/multidata'
}).then( res => {
console.log(res)
}).catch( err =>{
console.log(err)
})
拦截器
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
// 2.axios的拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
return config //不返回就会被拦截,接收不到数据
}, err => {
})
// 2.2.响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err);
})
// 3.发送真正的网络请求
return instance(config)
}
获取轮播图数据实例:
/***home.js首页的请求文件***/
import {request} from "network/request";
export function getHomeMultidata(){
return request({
url: '/home/multidata'
})
}
/***Home.vue使用***/
data() {
return {
banners: [], //保存数据
recommends: [] //保存数据
}
},
created() { //只写发送请求,具体的方法写在methods里面
this.getHomeMultidata()
},
methods: {
getHomeMultidata() {
getHomeMultidata().then( res => {
this.banners = res.data.banner.list;
this.recommends = res.data.recommend.list;
})
}
}