登录页面~Vue+Nginx+Express+Axios~系列（一）

登录页面_{Vue+Nginx+Express+Axios}系列（一）

标签（空格分隔）： ajax axios

---

目录

1. 原生ajax
2. axios
   
   

---

原生ajax

在没有ajax（Asynchronous JavaScript and XML）的年代，一个HTTP请求就对应了一个页面。

如果想要让用户不跳转页面同时请求HTTP，那么就要用javascript请求页面，用rurp接受数据后再用javascript更新页面，这样就可以让用户觉得自己仍然在当前页面的同时，不断更新数据。

用javascript使用ajax很简单，只用几步就行.

• 新建XMLHttpRequest实例

  let ajax=new XMLHttpRequest();

• 设置Http请求头

  ajax.setHttpRequest(name,value);

• 状态发生变化时，函数被回调

  ajax.onreadystatechange = function () { 
  

    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
        // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
          } else {
        // 失败，根据响应码判断失败原因:
        return fail(request.status);
    }
     } else {
    // HTTP请求还在继续...
         }
    }
  

• 发送请求

  ajax.open('GET','/api/user')
  
  ajax.send(); //发送请求

---

axios

axios是基于原生Promise开发的HTTP库，可以用于浏览器和nodejs环境中。

特性

• 支持Promise Api

• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 浏览器支持防止CSRF（跨站请求伪造）

基本使用

• GET方法

axios.get('/user?ID=12345')
  .then(function (response) {//使用链式调用代替了回调地狱
    console.log(response);
  })
  .catch(function (error) {//捕获错误
    console.log(error);
  });

• POST方法

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• 并发请求

function getUserAccount() {
  return axios.get('/user/12345');//返回一个axios
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));