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