JavaScript中的接口调用

1. 前后端交互模式

• 传统形式的URL：

  schema://host:port/path?query#fragment

• RESTFUL地址形式：URL定位资源，HTTP描述操作

  • HTTP请求方式：GET、POST、PUT(修改)、DELETE

2. Promise用法

• 异步调用

  1. 多次异步调用效果？
  2. 多次嵌套

• Promise是一个对象，获取异步操作的消息

• 好处：api简洁，避免回调地狱

• 创建promise对象，一个函数两个参数resolve，reject

• p.then两个函数当参数

• 多个任务then实现线性关系

• then返回：

  1. 返回promise对象
  2. 返回普通值

• 常用api实例方法：then,finally,catch

  • catch和then第二个函数参数等效，处理异常信息
  • finally一定会执行

• 常用对象方法：all（全部完成才能得到结果），race（一个完成就能得到结果）

   function getPromiseRequest(url) {
              return new Promise(function (resolve, reject) {
                  var xhr = new XMLHttpRequest();
                 
                  xhr.onreadystatechange = function () {
                      if(xhr.readyState != 4) return;// 避免执行reject函数
                      if (xhr.readyState == 4 && xhr.status == 200) {
                          resolve(xhr.responseText);
                      } else{
                          reject('找不到服务器');
                      }
                  };
                  xhr.open('get', url);
                  xhr.send(null);
  
              })
          }
          getPromiseRequest('http://localhost:3000/data')
              .then(function (data) {
                  console.log(data);
                  return getPromiseRequest('http://localhost:3000/adata');
              }, function (err) {
                  console.log(err);
              }).then(function(data) {
                  console.log(data);
              })
  

3. fetch用法

• xhr升级版
• data.text()返回api实例对象，通过此得到最终的数据
• 常用配置项：
  1. method（String):get,delete
     • /?id=1
     • /123 ------/:id
  2. post请求：body：{}

4. axios用法

 var params = new URLSearchParams();
        axios.defaults.baseURL = 'http://localhost:3000';//默认地址
        params.append('uname','pjh');
        params.append('pwd', 112211);
        axios.post('/axios',params
        ).then(function(ret) {
            console.log(ret.data);
        })

• 基于promise用于浏览器和node.js的HTTP客户端

• 特征：

  1. 支持浏览器和node.js
  2. 支持promise
  3. 能拦截请求和响应
  4. 自动转换JSON数据

• axios.get(url).then(function (data) {

  })// data是固定的，用于获取后台的实际数据，返回的是对象，封装了

• 常用api：get.post,put,delete

• get:url传递参数，params

  params: {

  ​ id: 123

  ​ }

• delete：同上传参

• post请求：默认传递json形式的数据

  1. URLSearchParams函数创建params对象
  2. append（‘键‘，’值‘）
  3. get的第二个参数是params

• put：{

  uname: ‘pjh’,

  pwd: 123

  }作为第二个参数

• 响应结果：

  1. data：实际响应的结果
  2. headers：响应头信息
  3. status：响应状态码，200正常
  4. statusText：响应状态信息

• 全局配置：

  1. 超时时间:axios.defaults.timeout = 3000;

  2. 默认地址：axios.defaults.baseURL = ‘http://xxx’// 配置请求的基准url地址

     下面axio发送请求自动拼接上面 baseURL

  3. 请求头：axios.defaults.headers[‘mytoken’] = [‘hello’]//后台允许传才可以传

• 拦截器：

  1. 请求拦截器：
  2. 响应拦截器：在获取数据之前对数据做一些处理加工

5. async/await用法

• async关键字用于函数上，函数返回值是Promise对象
• await关键字用于async函数当中，得到异步结果，用于一个promise实例对象
• 结合axios使用

 axios.defaults.baseURL = 'http://localhost:3000';
    
    async function getData() {
        let ret = await axios.get('/async1');
        let data = await axios.get('async2?info=' + ret.data);
        return data.data;
    }
    getData().then((data)=>{
        console.log(data);
    });