axios
admin
2023-02-13 03:00:05
0

功能强大的网络请求库,基于ajax,基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中,必须先导入再使用,使用get或post方法即可发送对应的请求,then方法中的回调函数会在请求成功或失败时触发,通过回到函数的形参可以获取响应内容,或者错误信息
注册全局的axios对象
功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF ***
————————————————

get请求
axios.get(地址?key 1= value1 & key2 = value2).then(function(response){},function(err){})
// 比如向具有指定ID的用户发出请求

axios.get('/user?ID=12345')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

————————————————

post请求

axios.post(地址,{key1 = value1 & key2 = value2}).then(function(response){},function(err){})
//比如发送表单请求
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) {
//两个请求现已完成
}));

————————————————

axios结合Vue使用,vue和axios两个库本身没有联系关系,先导入谁都可以
Vue.js 2.0之前使用 vue-resource 除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。
Vue.js 2.0 版本之后推荐使用 axios 来完成 ajax 请求。axios回调函数中的this已经改变,无法访问data中的数据,应使用箭头函数,或者把this保存起来,回调函数中直接使用保存的this即可。

如果使用vue-cli
安装 axios

$ npm install axios
$ bower install axios
$ yarn add axios

在要使用的文件中引入axios
import axios from ‘axios

axios支持IE8+,但原理是基于promise之上实现的,因此会存在不兼容IE的问题

解决方案:

(1)、首先安装 babel-polyfill,来解决IE不支持 promise对象的问题

npm install babel-polyfill -s

(2)、安装成功以后需要在 main.js 中引入 babel-polyfill

import 'babel-polyfill'

一般会配置 webpack.base.config.js 中 entry

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"] 
    // app: './src/main.js'
  },
}

安卓4.3以下的手机不支持axios的使用,无法使用promise

解决方案: (1)、项目中安装 es6-promise

npm install es6-promise -s
或者
npm install es6-promise --save-dev

(2)、引入 es6-promise

import promise from 'es6-promise'

(3)、注册 es6-promise (一定要在axios之前注册)

// 注意: es6-promise 一定要在 axios 之前注册

promise.polyfill()

或者

require('es6-promise').polyfill();

vue中使用Axios调用接口时出现的ie数据处理问题

问题:在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且也能抓到服务端返回来的数据。但在处理数据时会出现问题。

原因:typeOf 来查看返回数据的类型发现axios在IE时处理的返回数据居然是string类型

解决:

let newData;

if (typeOf data === 'string') {

    newData = JSON.parse(data)

} else {

  newData = data

    }

Node.js 环境
在 node.js里, 可以使用 querystring 模块:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

相关内容

热门资讯

活力中国调研行丨一束“光”的故... 它被称为“最快的刀”“最准的尺”“最亮的光”。从一束“光”到一颗“芯”,再到规模千亿的产业集群,今天...
携手前沿技术 共创智能未来 携手前沿技术 共创智能未来 ——来自2026年世界互联网大会数字丝路发展论坛的声音 夏日长安,秦岭叠...
上海浩劢取得桌面式轻型悬臂吊专... 国家知识产权局信息显示,上海浩劢工业科技有限公司取得一项名为“桌面式轻型悬臂吊”的专利,授权公告号C...
毒油风暴未歇民进党却急着上架,... 海峡导报综合报道 岛内毒油食安风暴持续延烧,台北市长蒋万安持续号召民众7·25上凯道,但“食药署”2...
WAIC挤满“卖铲人”,但算力... 2026年的WAIC,机器人依然抢占了绝大多数镜头。但展馆里数量增长最快的,是自称“AI Infra...
对话芯展速许玮:“内存墙”下,... Token经济时代,衡量AI价值的标准,正从模型能力转向Token生产效率。AI因此从工具演变为新的...
菲尔兹奖得主邓煜写过这些诗词 邓煜 李少君 徐俪成 | 澎湃新闻记者 徐萧 整理北京时间7月23日晚,中国数学家王虹、邓煜获颁菲尔...
中国海警局新闻发言人就菲位南海... 中国海警局新闻发言人姜略表示,7月24日,菲律宾组织7艘公务船、3艘海警舰、1艘运鱼船,并唆使大量渔...
外交部回应美国对数十国加征关税 7月24日,外交部发言人林剑主持例行记者会。有记者问:美国新一轮关税措施将于今天生效,外交部能否就此...
台湾岛以东相关海域治理进入经济... 为全面了解我国管辖海域渔业资源状况,7月17日至23日,农业农村部中国水产科学研究院东海水产研究所,...