标签:一个 type mic ram img install 配置 work rgba
npm install axios --save
axios({
url: ‘http://123.207.32.32:8000/home/multidata‘,
method: ‘get‘
}).then((res) => {
console.log(res);
})
axios({
// url: ‘http://123.207.32.32:8000/home/data?type=sell&page=1‘,
url: ‘http://123.207.32.32:8000/home/data‘,
//专门针对get请求的参数拼接
params: {
type: ‘sell‘,
page: 5
},
method: ‘get‘
}).then((res) => {
console.log(res);
})
有时候,我们可能需要同时发送两个请求
axios.all([
axios({
url: ‘http://123.207.32.32:8000/home/multidata‘
}),
axios({
url: ‘http://123.207.32.32:8000/home/data‘,
//专门针对get请求的参数拼接
params: {
type: ‘sell‘,
page: 5
}
})
]).then((result) => {
console.log(result[0]);
console.log(result[1]);
})
在开发中,可能很多参数都是固定的,这个时候我们可以进行一些抽取,也可以利用axios的全局配置
axios.defaults.baseURL = ‘http://123.207.32.32:8000‘
axios.defaults.timeout = 5000
axios.all([
axios({
url: ‘/home/multidata‘
}),
axios({
url: ‘/home/data‘,
//专门针对get请求的参数拼接
params: {
type: ‘sell‘,
page: 5
}
})
]).then((result) => {
console.log(result[0]);
console.log(result[1]);
})
常见的配置选项:
请求地址:
请求类型:
请求根路径:
请求前的数据处理:
请求后的数据处理:
自定义的请求头:
URL查询对象:
为什么要创建axios的实例?
目录结构

request.js
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
//封装request模块(通过回调函数success和failure处理)
import {request} from "./network/request";
request({
url: ‘/home/multidata‘
}, res => {
console.log(res);
}, err => {
console.log(err);
})
request.js
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
return new Promise((resolve, reject) => {
instance(config)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
//封装request模块(通过Promise方式)
import {request} from "./network/request";
request({
url: ‘/home/multidata‘
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
因为axios本身返回的就是Promise,所以不用再封装一层Promise
request.js
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
return instance(config)
}
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
//封装request模块(通过Promise方式)
import {request} from "./network/request";
request({
url: ‘/home/multidata‘
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行相应的处理
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
//axios的拦截器
//请求拦截
instance.interceptors.request.use(aaa => {
console.log(aaa);
//请求拦截的作用:
//1、比如aaa中的一些信息不符合服务器的要求,在这里可以进行处理
//2、比如每次发送网络请求时,都希望在界面中显示一个请求中的图标(比如一个循环的圈圈)
//3、某些网络请求(比如登录(token)),必须携带一些特殊的信息
//必须返回,如果不返回则请求发不出去
return aaa;
}, error => {
console.log(error);
})
//响应拦截(服务器将结果发过来了)
instance.interceptors.response.use(res => {
console.log(res);
//必须返回,如果不返回就拿不到结果
//在这里将无用的数据剔除掉,将有用数据返回
return res.data
}, error => {
console.log(error);
})
//发送真正的网络请求
return instance(config)
}
标签:一个 type mic ram img install 配置 work rgba
原文地址:https://www.cnblogs.com/tang321/p/14584128.html