axios
-
Promise based HTTP client for the browser and node.js
- 以Promise为基础的HTTP客户端，适用于：浏览器和node.js
- 封装ajax，用来发送请求，异步获取数据
// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求created: function () { axios.get(url) .then(function(resp) {}) }
---
// 配合 webpack 使用方式如下： import Vue from ‘vue‘ import axios from ‘axios‘ // 将 axios 添加到 Vue.prototype 中 Vue.prototype.$axios = axios --- // 在组件中使用： methods: { getData() { this.$axios.get(‘url‘) .then(res => {}) .catch(err => {}) } } --- // API使用方式： axios.get(url[, config]) axios.post(url[, data[, config]]) axios(url[, config]) axios(config)
Get 请求
const url = ‘http://vue.studyit.io/api/getnewslist‘ // url中带有query参数 axios.get(‘/user?id=89‘) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // url和参数分离，使用对象 axios.get(‘/user‘, { params: { id: 12345 } })
Post 请求
- 不同环境中处理 POST请求
- 默认情况下，axios 会将JS对象序列化为JSON对象。为了使用
application/x-www-form-urlencoded格式发送请求，我们可以这样：
// 使用 qs 包，处理将对象序列化为字符串 // npm i -S qs // var qs = require(‘qs‘) import qs from ‘qs‘ qs.stringify({ ‘bar‘: 123 }) ===> "bar=123" axios.post(‘/foo‘, qs.stringify({ ‘bar‘: 123 })) // 或者： axios.post(‘/foo‘, ‘bar=123&age=19‘) const url = ‘http://vue.studyit.io/api/postcomment/17‘ axios.post(url, ‘content=点个赞不过份‘) axios.post(‘/user‘, qs.stringify({ firstName: ‘Fred‘, lastName: ‘Flintstone‘ })) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
全局配置
// 设置请求公共路径：
axios.defaults.baseURL = ‘http://vue.studyit.io‘