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中。

axios和mockjs的使用