电商网站建设运营协议,有哪些官网做得比较好,云服务器费用,台州论坛不再继续维护vue-resource#xff0c;并推荐大家使用 axios 开始#xff0c;axios 被越来越多的人所了解。本来想在网上找找详细攻略#xff0c;突然发现#xff0c;axios 的官方文档本身就非常详细#xff01;#xff01;有这个还要什么自行车#xff01;#xff01;所…不再继续维护vue-resource并推荐大家使用 axios 开始axios 被越来越多的人所了解。本来想在网上找找详细攻略突然发现axios 的官方文档本身就非常详细有这个还要什么自行车所以推荐大家学习这种库最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档相信大家只要吃透本文再加以实践axios 就是小意思啦如果您觉得本文对您有帮助不妨点个赞或关注收藏一下您的鼓励对我非常重要。axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端它本身具有以下特征从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据浏览器兼容性引入方式12345$ npm install axios$ cnpm install axios //taobao源$ bower install axios或者使用cdn举个栗子执行 GET 请求123456789101112131415161718192021// 向具有指定ID的用户发出请求axios.get(/user?ID12345).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 也可以通过 params 对象传递参数axios.get(/user, {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});执行 POST 请求12345678910axios.post(/user, {firstName: Fred,lastName: Flintstone}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});执行多个并发请求123456789101112function getUserAccount() {return axios.get(/user/12345);}function getUserPermissions() {return axios.get(/user/12345/permissions);}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {//两个请求现已完成}));axios API可以通过将相关配置传递给 axios 来进行请求。axios(config)123456789// 发送一个 POST 请求axios({method: post,url: /user/12345,data: {firstName: Fred,lastName: Flintstone}});axios(url[, config])12// 发送一个 GET 请求 (GET请求是默认请求模式)axios(/user/12345);请求方法别名为了方便起见已经为所有支持的请求方法提供了别名。axios.request(config)axios.get(url [config])axios.delete(url [config])axios.head(url [config])axios.post(url [data [config]])axios.put(url [data [config]])axios.patch(url [data [config]])注意当使用别名方法时不需要在config中指定urlmethod和data属性。并发帮助函数处理并发请求。axios.all(iterable)axios.spread(callback)创建实例您可以使用自定义配置创建axios的新实例。axios.create([config])12345var instance axios.create({baseURL: https://some-domain.com/api/,timeout: 1000,headers: {X-Custom-Header: foobar}});实例方法可用的实例方法如下所示。 指定的配置将与实例配置合并。axiosrequest(config)axiosget(url [config])axiosdelete(url [config])axioshead(url [config])axiospost(url [data [config]])axiosput(url [data [config]])axiospatch(url [data [config]])请求配置这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法请求将默认为GET。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131{// url是将用于请求的服务器URLurl: /user,// method是发出请求时使用的请求方法method: get, // 默认// baseURL将被添加到url前面除非url是绝对的。// 可以方便地为 axios 的实例设置baseURL以便将相对 URL 传递给该实例的方法。baseURL: https://some-domain.com/api/,// transformRequest允许在请求数据发送到服务器之前对其进行更改// 这只适用于请求方法PUTPOST和PATCH// 数组中的最后一个函数必须返回一个字符串一个 ArrayBuffer或一个 StreamtransformRequest: [function (data) {// 做任何你想要的数据转换return data;}],// transformResponse允许在 then / catch之前对响应数据进行更改transformResponse: [function (data) {// Do whatever you want to transform the datareturn data;}],// headers是要发送的自定义 headersheaders: {X-Requested-With: XMLHttpRequest},// params是要与请求一起发送的URL参数// 必须是纯对象或URLSearchParams对象params: {ID: 12345},// paramsSerializer是一个可选的函数负责序列化params// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: brackets})},// data是要作为请求主体发送的数据// 仅适用于请求方法“PUT”“POST”和“PATCH”// 当没有设置transformRequest时必须是以下类型之一// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - Browser only: FormData, File, Blob// - Node only: Streamdata: {firstName: Fred},// timeout指定请求超时之前的毫秒数。// 如果请求的时间超过timeout请求将被中止。timeout: 1000,// withCredentials指示是否跨站点访问控制请求// should be made using credentialswithCredentials: false, // default// adapter允许自定义处理请求这使得测试更容易。// 返回一个promise并提供一个有效的响应(参见[response docs](response-api))adapter: function (config) {/* ... */},// auth表示应该使用 HTTP 基本认证并提供凭据。// 这将设置一个Authorization头覆盖任何现有的Authorization自定义头使用headers设置。auth: {username: janedoe,password: s00pers3cret},// “responseType”表示服务器将响应的数据类型// 包括 arraybuffer, blob, document, json, text, streamresponseType: json, // default//xsrfCookieName是要用作 xsrf 令牌的值的cookie的名称xsrfCookieName: XSRF-TOKEN, // default// xsrfHeaderName是携带xsrf令牌值的http头的名称xsrfHeaderName: X-XSRF-TOKEN, // default// onUploadProgress允许处理上传的进度事件onUploadProgress: function (progressEvent) {// 使用本地 progress 事件做任何你想要做的},// onDownloadProgress允许处理下载的进度事件onDownloadProgress: function (progressEvent) {// Do whatever you want with the native progress event},// maxContentLength定义允许的http响应内容的最大大小maxContentLength: 2000,// validateStatus定义是否解析或拒绝给定的promise// HTTP响应状态码。如果validateStatus返回true(或被设置为null promise将被解析;否则promise将被// 拒绝。validateStatus: function (status) {return status 200 status 300; // default},// maxRedirects定义在node.js中要遵循的重定向的最大数量。// 如果设置为0则不会遵循重定向。maxRedirects: 5, // 默认// httpAgent和httpsAgent用于定义在node.js中分别执行http和https请求时使用的自定义代理。// 允许配置类似keepAlive的选项// 默认情况下不启用。httpAgent: new http.Agent({ keepAlive: true }),httpsAgent: new https.Agent({ keepAlive: true }),// proxy定义代理服务器的主机名和端口// auth表示HTTP Basic auth应该用于连接到代理并提供credentials。// 这将设置一个Proxy-Authorization header覆盖任何使用headers设置的现有的Proxy-Authorization 自定义 headers。proxy: {host: 127.0.0.1,port: 9000,auth: : {username: mikeymike,password: rapunz3l}},// “cancelToken”指定可用于取消请求的取消令牌// (see Cancellation section below for details)cancelToken: new CancelToken(function (cancel) {})}使用 then 时您将收到如下响应12345678axios.get(/user/12345).then(function(response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});配置默认值您可以指定将应用于每个请求的配置默认值。全局axios默认值123axios.defaults.baseURL https://api.example.com;axios.defaults.headers.common[Authorization] AUTH_TOKEN;axios.defaults.headers.post[Content-Type] application/x-www-form-urlencoded;自定义实例默认值1234567//在创建实例时设置配置默认值var instance axios.create({baseURLhttps://api.example.com});//在实例创建后改变默认值instance.defaults.headers.common [Authorization] AUTH_TOKEN;配置优先级顺序配置将与优先顺序合并。 顺序是lib / defaults.js中的库默认值然后是实例的defaults属性最后是请求的config参数。 后者将优先于前者。 这里有一个例子。123456789101112//使用库提供的配置默认值创建实例//此时超时配置值为0这是库的默认值var instance axios.create();//覆盖库的超时默认值//现在所有请求将在超时前等待2.5秒instance.defaults.timeout 2500;//覆盖此请求的超时因为它知道需要很长时间instance.get(/ longRequest{timeout5000});拦截器你可以截取请求或响应在被 then 或者 catch 处理之前1234567891011121314151617//添加请求拦截器axios.interceptors.request.use(function(config){//在发送请求之前做某事return config;}function(error){//请求错误时做些事return Promise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){//对响应数据做些事return response;}function(error){//请求错误时做些事return Promise.reject(error);});如果你以后可能需要删除拦截器。12var myInterceptor axios.interceptors.request.use(function () {/*...*/});axios.interceptors.request.eject(myInterceptor);你可以将拦截器添加到axios的自定义实例。12var instance axios.create();instance.interceptors.request.use(function () {/*...*/});处理错误1234567891011121314axios.get(/ user / 12345).catch(function(error){if(error.response){//请求已发出但服务器使用状态代码进行响应//落在2xx的范围之外console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else {//在设置触发错误的请求时发生了错误console.log(Errorerror.message);}}console.log(error.config);});您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。12345axios.get(/ user / 12345{validateStatusfunction(status){return status 500; //仅当状态代码大于或等于500时拒绝}}})消除您可以使用取消令牌取消请求。axios cancel token API基于可取消的promise提议目前处于阶段1。您可以使用CancelToken.source工厂创建一个取消令牌如下所示123456789101112131415var CancelToken axios.CancelToken;var source CancelToken.source();axios.get(/user/12345, {cancelToken: source.token}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log(Request canceled, thrown.message);} else {// 处理错误}});//取消请求(消息参数是可选的)source.cancel(操作被用户取消。);您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌123456789101112var CancelToken axios.CancelToken;var cancel;axios.get(/ user / 12345{cancelTokennew CancelToken(function executor(c){//一个执行器函数接收一个取消函数作为参数cancel c;})});// 取消请求clear();注意您可以使用相同的取消令牌取消几个请求。使用application / x-www-form-urlencoded格式默认情况下axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据您可以使用以下选项之一。浏览器在浏览器中您可以使用URLSearchParams API如下所示1234var params new URLSearchParams();params.append(param1, value1);params.append(param2, value2);axios.post(/foo, params);请注意所有浏览器都不支持URLSearchParams但是有一个polyfill可用(确保polyfill全局环境)。或者您可以使用qs库对数据进行编码12var qs require(qs);axios.post(/foo, qs.stringify({ bar: 123 });Node.js在node.js中可以使用querystring模块如下所示12var querystring require(querystring);axios.post(http://something.com/, querystring.stringify({ foo: bar });你也可以使用qs库。Promiseaxios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises您可以使用polyfill。TypeScriptaxios包括TypeScript定义。12import axios from axios;axios.get(/user?ID12345);axios在很大程度上受到Angular提供的$http服务的启发。 最终axios努力提供一个在Angular外使用的独立的$http-like服务。
