axios和mockjs的使用
axios封装
封装的原因：
在不同的环境中自动识别环境
get的基本使用
axios.get('api/xxx', {
params: {}, // {} 配置信息，params 表示传递到服务端的数据，以url参数的形式拼接在请求地址的后面
headers: {} // 请求头，
}).then(res => alert(res.data));
post的基本使用
// psot 请求爨地三个参数
// 1.请求地址
// 2.传递的数据，在请求体中
// axios默认发送的数据式json格式
// 3.配置信息 (可选参数)
// headers content-type: 'application/json' 默认格式
axios.post('api/xxx',{
usename: 'xxx',
password: 'xxx'
},{
params:{ // 可以添加params,url地址中出现
}
}).then(res=>alert(res)).catch(err=>alert(err))
put,delete用法相同
新建request.js
import axios from 'axios'
export function get(url, params) {
return axios.get(url,{
params
});
}
export function post(url,data) {
return axios.post(url, data);
}
export function del(url) {
return axios.delete(url);
}
export function put(url, data) {
return axios.put(url, data);
}
调用
import {get} from '../utils/request'
get('https://xxx', {}).then(res=>alert(res)).catch(err=>alert(err));
进一步封装
import axios from 'axios'
// 创建一个axios的对象
const instance = axios.create({
baseURL: 'https://xxx', // 会再发送请求的 时候拼接在url参数面前
timeout: 5000
})
export function get(url, params) {
return instance.get(url,{
params
});
}
export function post(url,data) {
return instance.post(url, data);
}
export function del(url) {
return instance.delete(url);
}
export function put(url, data) {
return instance.put(url, data);
}
axios的并发处理
// 请求是异步操作
axios.get('xxx'); //1
axios.get('xxx'); //2
axios.get('xxx'); //3
// ## 请求回来不保证顺序：
axios.all([
axios.get('xxx'); //1
axios.get('xxx'); //2
axios.get('xxx'); //3
]).then(value=>console.log(value));
// value: []; 三个数据合并在一起了，且保证了顺序
//axios提供了内置方法，用与输出返回的结果
.then(axios.spread((res1,res2,res3) => {
console.log(res1.config.data);
console.log(res2.config.data);
console.log(res3.config.data);
}))
全局拦截
import axios from 'axios'
// 创建一个axios的对象
const instance = axios.create({
baseURL: 'https://xxx', // 会再发送请求的 时候拼接在url参数面前
timeout: 5000
})
// 请求拦截,所有的网络请求都会先走这个方法
// 我们可以添加自定义的内容[和服务器商议]
instance.interceptor.request.use(function(config) {
config.heads.token = '123456'
return config;
}, function(err) {
return Promise.reject(err);
});
//响应拦截，所有网络请求返回数据之后都会限制性此方法
// 可以根据服务器的返回状态码做相应的处理
instance.interceptors.response.use(function(response) {
return response;
}, function(err) {
return Promise.reject(err);
});
export function get(url, params) {
return instance.get(url,{
params
});
}
export function post(url,data) {
return instance.post(url, data);
}
export function del(url) {
return instance.delete(url);
}
export function put(url, data) {
return instance.put(url, data);
}
Mock.js
安装 npm install mockjs
新建文件夹Mock>mock.js
const Mock = require('mockjs');
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(data);
console.log(JSON.stringify(data, replacer:null,space:4));
// 运行
语法规范
1.数据模板定义规范
包含3个部分：属性名，生成规则和属性
"属性名|生成规则" ： 属性值 // 'name|rule':value
1.1 字符串，数值有7中生成规则
生成规则 说明 示例 min-max 生成min~max之间的字符串 "list|1-10" count 生成count个字符串 "list|5" min-max.dmin-dmax 生成minmax之间的浮点数，小数点位数在dmindmax之间 "id|1-10.1-3 ": 1 count.dcount 生成count个字符串，小数店位数位dcount "id|8.2":1 min-max.dcount // 同上 count.dmin-dmax //同上 +step 每次进行累加一个值 "id|+1":1
2.数据占位定义规范
'lsit|5':[{ cname:'@cname', // 内置中文姓名 city:'@city', // 内置成实 full:'@cname-@city' }]单独输出：
const Mock = require('mockjs'); console.log(Mock.Random.cname()); console.log(Mock.mock('@cname'));
自行扩展占位符：
eg:
Mock.Random.extend({ cstore() { return this.pick([ '宠物店', '美容店', '小吃店', '快餐店' ]) } }) console.log(Mock.mock('@cstore'));
axios和mock拦截混合使用
// axios 请求：
axios.request({
method:'get',
url: 'https://xxx'
}).then(res=>{
console.log(res.data);
}).catch(err=>console.log(err));
// Mock数据拦截填充
Mock.mock('https://xxx', { // 请求地址相同
"list|5-10": [
{
'id|+1': 1,
'username': '@cname',
'email': '@email',
'gender': '@boolean',
'price': '@integer'
}
]
})
请求地址相同即可，输出的结构实在res中。
