axios初次笔记

axios是什么

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

总结：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。

axios怎么用

参考官网：axios中文网

原生

参考：axios中文网/概述

安装：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

执行get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

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

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

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

Vue框架

参考：axios中文网/框架整合/vue-axios 、axios中文网/plugins/vue-axios-plugin

在Vue的入口文件配置：

import Vue from 'Vue'
import VueAxiosPlugin from 'vue-axios-plugin'

Vue.use(VueAxiosPlugin, {
  // 请求拦截处理
  reqHandleFunc: config => config,
  reqErrorFunc: error => Promise.reject(error),
  // 响应拦截处理
  resHandleFunc: response => response,
  resErrorFunc: error => Promise.reject(error)
})

在 Vue 组件上添加了 $http 属性, 它默认提供 get 和 post 方法，使用如下:

this.$http.get(url, data, options).then((response) => {
  console.log(response)
})
this.$http.post(url, data, options).then((response) => {
  console.log(response)
})

备忘：

import axios from 'axios'
Vue.prototype.$http = axios

Vue.prototype.url = 'http://196.168.1.1:8080/api/v1/'

Promise是什么

参考博客：promise是什么意思、Promise是什么？

Promise：英文承诺意思，Promise对象中保存某个未来才回结束的事件(通常是一个异步操作）的结果。

Promise是一种异步操作的解决方案，将写法复杂的传统的回调函数和监听事件的异步操作，用同步代码的形式表达出来。

避免了多级异步操作的回调函数嵌套。

Promise最早是一个函数库，现在已经被ES6写入标准用法。

Promise是一种构造函数。

Promise实例创建后会立即执行。

promise有三个状态：pendding、rejected、resolved；

promise对象resolved、rejected函数，在异步事件状态pendding->resolved回调成功时，会调用resolved函数；当异步操作失败时，回调用rejected函数。

Promise的then(resolved,rejected)函数参数有两个，一个resolved函数，一个rejected函数。

Promise的catch()：捕捉promise错误函数，和then函数参数中rejected作用一样，处理错误，由于Promise抛出错误具有冒泡性质，能够不断传递，会传到catch中，所以建议所有错误处理放在catch中，then中只处理成功的。

Promise一个大特色就是可以链式调用，在then，catch中可以返回Promise对象。

JavaScript原型链是什么

参考：javascript原型，原型链有什么特点、JavaScript原型，原型链 ? 有什么特点？

1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。

2.原型链，简单理解就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样可以一直通过__proto__想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

3原型链实现了继承；

axios初次笔记（axios、promise是什么）

axios初次笔记

axios是什么

axios怎么用

原生

Vue框架

Promise是什么

JavaScript原型链是什么

猜你喜欢