广州建站模板搭建,建设银行网站收款怎么打明细,wordpress 多域名共享数据库,做网站容易 但运营难文章目录一、axios介绍二、安装axios三、 案例四、框架整合五、插件一、axios介绍 什么是 axios? Axios 是一个基于 promise 的 HTTP 库#xff0c;可以用在浏览器和 node.js 中。 特性: 1、从浏览器中创建 XMLHttpRequests 2、从 node.js 创建 http 请求 3、支持 Promise AP… 文章目录一、axios介绍二、安装axios三、 案例四、框架整合五、插件一、axios介绍 什么是 axios? Axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。 特性: 1、从浏览器中创建 XMLHttpRequests 2、从 node.js 创建 http 请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求数据和响应数据 6、取消请求 7、自动转换 JSON 数据 8、客户端支持防御 XSRF 浏览器支持
二、安装axios
方法一速度慢
npm install axios -g方法二速度快
cnpm install axios -g参数说明 -g表示全局安装将会安装在你配置的C:\Users\XinLiu\nodejs\node_global目录下。如果不指定则为当前文件夹所在目录局部
安装成功后如下所示 3. 无需安装直接使用cdn
script srchttps://unpkg.com/axios/dist/axios.min.js/script三、 案例
执行 GET 请求
// 为给定 ID 的 user 创建请求
axios.get(/user?ID12345).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);});执行 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);
}function getUserPermissions() {return axios.get(/user/12345/permissions);
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成}));四、框架整合
1、整合vue-axios 基于vuejs 的轻度封装 1.1 安装vue-axios
cnpm install --save axios vue-axios -g //-g:全局安装1.2 将下面代码加入入口文件
import Vue from vue
import axios from axios
import VueAxios from vue-axiosVue.use(VueAxios, axios)按照这个顺序分别引入这三个文件 vue, axios and vue-axios
1.3 你可以按照以下方式使用:
Vue.axios.get(api).then((response) {console.log(response.data)
})this.axios.get(api).then((response) {console.log(response.data)
})this.$http.get(api).then((response) {console.log(response.data)
})五、插件
axios-retry Axios 插件 重试失败的请求 1.1 安装
cnpm install axios-retry -g //-g:全局安装1.2 使用
// CommonJS
// const axiosRetry require(axios-retry);// ES6
import axiosRetry from axios-retry;axiosRetry(axios, { retries: 3 });axios.get(http://example.com/test) // The first request fails and the second returns ok.then(result {result.data; // ok});// Exponential back-off retry delay between requests
axiosRetry(axios, { retryDelay: axiosRetry.exponentialDelay});// Custom retry delay
axiosRetry(axios, { retryDelay: (retryCount) {return retryCount * 1000;
}});// 自定义 axios 实例
const client axios.create({ baseURL: http://example.com });
axiosRetry(client, { retries: 3 });client.get(/test) // 第一次请求失败第二次成功.then(result {result.data; // ok});// 允许 request-specific 配置
client.get(/test, {axios-retry: {retries: 0}}).catch(error { // The first request failserror ! undefined});注意除非 shouldResetTimeout被设置, 这个插件将请求超时解释为全局值, 不是针对每一个请求二是全局的设置。
1.3 测试 克隆这个仓库 然后 执行:
cnpm testvue-axios-plugin Vuejs 项目的 axios 插件 2.1 安装
可以通过script标签引入无需安装
!-- 在 vue.js 之后引入 --
script srchttps://unpkg.com/vue/script
script srchttps://unpkg.com/vue-axios-plugin/scriptcnpm install --save vue-axios-plugin -g //-g:全局安装然后在入口文件配置如下:
import Vue from Vue
import VueAxiosPlugin from vue-axios-pluginVue.use(VueAxiosPlugin, {// 请求拦截处理reqHandleFunc: config config,reqErrorFunc: error Promise.reject(error),// 响应拦截处理resHandleFunc: response response,resErrorFunc: error Promise.reject(error)
})2.2 示例 在 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)
})你也可以通过 this.$axios 来使用 axios 所有的 api 方法如下
this.$axios.get(url, data, options).then((response) {console.log(response)
})this.$axios.post(url, data, options).then((response) {console.log(response)
})
