38-fetch、async(await)、mock

一、fetch：类似$.ajax、axios。Fetch是基于promise设计的
格式：

fetch('路径', {
    method: "POST",
    headers: {
        'Content-Type': 'application/json'
    },
    params: {
        user: user.value,
        pwd: pwd.value
    }
}).then(function (res) {
    return res.json();
})

二、async await：解决异步

async函数是什么？一句话，async函数就是Generator函数的语法糖。

比如有一个Generator函数，依次读取两个文件。

var fs = require('fs');

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

写成async函数，就是下面这样。

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

一比较就会发现，async函数就是将Generator函数的星号（*）替换成async，将yield替换成await，仅此而已。

三、mock：假如没有后台，或者是前端已经写完功能，但后台还没有写完接口就需要自己模拟数据接口

1. 首先需要下载

npm i fetch-mock

2. 可以新建一个api.js

import FetchMock from 'fetch-mock';
//FetchMock.mock("/login",{code:200});
//第一个参数是路径，第二个参数是返回的数据  页面打印{code:200}
FetchMock.mock("/login", (url, params) => { 
//相当于后台,当我输入用户名为a，密码是1的时候
    console.log(url, params);
    /*
       {method: "POST", headers: {…}, params: {…}}
        headers: {Content-Type: "application/json"}
        method: "POST"
        params: {user: "a", pwd: "1"}
   */
        let p = params.params;
        if(p.user == "admin"){
            if(p.pwd == "admin"){
                return {code:400,msg:"恭喜登陆成功"}
            }else{
                return {code:401,msg:"密码错误"}
            }
        }else{
            return {code:402,msg:"用户名不正确"}
        }
});

3. 引入使用

import $ from "../common/getId";
import formFetch from "../common/getApi"
const event = () => {
    let btn = $("btn"),
        user = $("user"),
        pwd = $("pwd");

    btn.onclick = async () => {
        let data = await formFetch("/login",{
            user:user.value,
            pwd:pwd.value
        })
        console.log(data)
    }
}