axios 使用详解

一、安装

cnpm install axios

二、使用

三种写法

// 第一种写法
axios.get('/query?name=tom').then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});
// 第二种写法
axios.get('/query', {params: {name: 'tom'}
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});
// 第三种写法
axios({method: 'get',url: '/query',data: {name: 'tom',}
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});

POST请求

axios.post('/query', {name: 'tom',icon: 'img_path'
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});

并发请求

function getUserAccount() {return axios.get('/query?name=tom');
}function getUserPermissions() {return axios.get(/role?name=tom');
}axios.all([getUserAccount(), getUserPermissions()]).then(response) {console.log(response);// 两个请求都执行完成后返回，所有的请求结果都在这个res的对象下面
}));

三、参数配置

axios({// 请求的服务器 URLurl: '/user',// 创建请求时使用的方法method: 'get', // 默认是 get// 将自动加在 url 前baseURL: 'https://some-domain.com/api/',// 在向服务器发送前，修改请求数据// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 StreamtransformRequest: [function (data) {// 对 data 进行任意转换处理return data;}],// 在传递给 then/catch 前，修改响应数据transformResponse: [function (data) {// 对 data 进行任意转换处理return data;}],// 自定义请求头headers: {'X-Requested-With': 'XMLHttpRequest'},// 与请求一起发送的 URL 参数params: {ID: 12345},// 用于 params 的序列化的函数paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: 'brackets'})},// 请求发送的数据，适用于 PUT, POST, 和 PATCH// 在没有设置 transformRequest 时，必须是以下类型之一：// string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// 浏览器专属：FormData, File, Blob// Node 专属： Streamdata: {firstName: 'Fred'},// 指定请求超时毫秒数(0 表示无超时时间)timeout: 1000,// 表示跨域请求时是否需要使用凭证，默认 falsewithCredentials: false, // 允许自定义处理请求，常用用于测试adapter: function (config) {/* ... */},// 表示应该使用 HTTP 基础验证，并提供凭据，该参数会在 headers 设置 Authorizationauth: {username: 'janedoe',password: 's00pers3cret'},// 表示服务器响应的数据类型，// 支持类型：arraybuffer, blob, document, json（默认）, text, streamresponseType: 'json', // 用作 xsrf token 的值的cookie的名称xsrfCookieName: 'XSRF-TOKEN', //  xsrf token 值的 HTTP 头的名称xsrfHeaderName: 'X-XSRF-TOKEN', // 上传处理进度事件onUploadProgress: function (progressEvent) {},// 下载处理进度事件onDownloadProgress: function (progressEvent) {},// 响应内容的最大尺寸maxContentLength: 2000,// 定义对于给定的HTTP 响应状态码。validateStatus: function (status) {return status >= 200 && status < 300; },// 定义在 node.js 中 follow 的最大重定向数目，为0将不会 follow 任何重定向maxRedirects: 5, // 在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理httpAgent: new http.Agent({ keepAlive: true }),httpsAgent: new https.Agent({ keepAlive: true }),// 'proxy' 定义代理服务器的主机名称和端口// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据proxy: {host: '127.0.0.1',port: 9000,auth: : {username: 'mikeymike',password: 'rapunz3l'}}
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});

axios 使用详解相关推荐

axios vue 回调函数_vue中的ajax请求和axios包详解
在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 首先,引入axios CDN: npm: npm install axios 并在全局的js中引入:import axi ...
【Vue】axios 配置详解
文章目录一.axios 定义二.axios 特性三.安装和使用四.请求写法执行 `GET` 请求: 执行 `POST` 请求: 执行多个并发请求: 五.axios API 六.创建实例七. ...
axios请求接口http_使用axios请求接口,几种content-type的区别详解
axios的使用安装(一般使用框架的话, 脚手架都集成了) $ npm install axios 请求示例 // POST axios.post('/user', { firstName: 'Fr ...
ios php 表单提交图片上传,axios发送post请求提交图片表单步骤详解
这次给大家带来axios发送post请求提交图片表单步骤详解,axios发送post请求提交图片表单的注意事项有哪些,下面就是实战案例,一起来看一下. DOME 接口const userUploadA ...
vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解
前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需 ...
vue webpack 访问php,实例详解vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果.本文主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现 ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
python 录制web视频_Python django框架 web端视频加密的实例详解
视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play ...
vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」
作者:lishuai 转发链接:https://segmentfault.com/a/1190000022757326 前言 vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布( ...

axios 使用详解

一、安装

二、使用

三、参数配置

axios 使用详解相关推荐

最新文章

热门文章