本篇文章给大家带来的内容是关于axios异步请求数据的使用（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用Mock模拟好后端数据之后，就需要尝试请求加载数据了。数据请求选择了axios，现在都推荐使用axios。
axios（https://github.com/axios/axios）是基于 promise 的 HTTP 库。如官网文档介绍，npm i 之后，在需要的组件中加载就可以了。个人认为，编码的魅力在于，解决问题的方法不止一种，有时候这个方法在你的开发环境下ok，在我的开发环境下却不ok，所以，问题是各式各样的，而解决问题的方法也是百花齐放的。
axios的入门
1、安装
npm i axios -S
2、引入
在src目录下新建apis.js文件（项目逐渐完善的过程中会有很有个api接口，当然也可以命名为axios.js，命名是为了让别人看懂），并引入：
import axios from 'axios';
之后，编辑apis.js文件，考虑封装axios.get或post请求
3、apis.js文件的编辑
import axios from 'axios'; const Domain = "http://localhost:8080"; // 定义根域名 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置post默认的请求头 // 封装 post 请求 export function post(action, params){ return new Promise((resolve, reject) => { // url 判断是测试环境 就要拿 测试环境的域名， 正式环境的就要用 正式域名 let url = Domain + action; axios.post(url, params) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }); } // 封装 get 请求 export function get(action, params){ return new Promise((resolve, reject) => { axios.get(Domain + action, params) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }); } export default { postData(action, params){ return post(action, params) }, getData(action, params){ return get(action, params) } }
import api from '../../apis.js'; export default { name: "banner", data() { return { bannerList: [] }; }, created(){ this.getBanner(); // 在页面渲染完成即加载 }, methods: { getBanner(){ this.$api.getData('/getBanner').then(val => { this.bannerList = val.imgs; }); } } }
很多组件都需要请求数据，每用一次导入一次很麻烦，全局配置之后就不用在组件中导入了。
在入口文件main.js中引入，之后挂在vue的原型链上： import api from './apis.js'; Vue.prototype.$http = api; 在组件中使用： getBanner(){ this.$http.getData('/getBanner').then(val => { this.bannerList = val.imgs; }); }
在vuex的仓库文件store.js中引用，使用action添加方法。action 可以包含异步操作，而且可以通过 action 来提交 mutations。action有一个固有参数context，但是 context 是 state 的父级，包含state、getters
import Vue from 'Vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ // 定义状态 state: { banners: { name: 'pic' } }, actions: { // 封装一个 ajax 方法 saveBanner (context) { axios({ method: 'get', url: '/getBanner', data: context.state.banners }) } } })
在组件中发送请求的时候，需要使用 this.$store.dispatch 来分发
methods: { getBananer() { this.$store.dispatch('saveBanner') // actions里的方法名 } }
异步加载的几种方法
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。
data：规定要发送到服务器的数据。
async：布尔值，表示请求是否异步处理。默认是 true。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。
success：要求为Function类型的参数，请求成功后调用的回调函数。
error：Function类型的参数，请求失败后调用的回调函数。
jsonp：在一个 jsonp 中重写回调函数的字符串。
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ // handle success } error: function(data){ // handle error } jsonp: "" }); }); });
当Ajax请求的url不是本地或者同一个服务器的地址时，浏览器会报一个错误：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin…………由于浏览器的安全机制，不能调用不同服务器下的url地址。基于此，jQuery.ajax给出了jsonp的解决方案： 把服务器返回的数据类型设置为jsonp。
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "jsonp", // jsonp格式 success: function(data){ // handle success } error: function(data){ // handle error } jsonp: "callback" }); }); });
但是，jsonp是一种非官方的方法，而且这种方法只支持get请求，不如post请求安全。此外，jsonp需要服务器配合，如果是访问的是第三方服务器，我们没有修改服务器的权限，那么这种方式是不可行的。
ue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。vue-resource体积小，支持主流浏览器。不过，vue2.0之后就不再更新了，尤大神推荐使用axios。
{ // GET /someUrl this.$http.get('/someUrl').then(response => { // get body data this.someData = response.body; }, response => { // error callback }); }
同样地，由于浏览器的安全机制，vue-resource也面临着跨域请求的问题。解决方案如下：在vue项目下的 config/index.js 文件里面配置代理proxyTable:
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 新增，解决跨域请求问题 '/api': { target: 'http://192.168.1.103:8080/', changeOrigin: true, pathRewrite: { '`/api': '/' } }, secure: false }, target中写你想要请求数据的地址的域名
与vue-resource一样，在vue项目下的 config/index.js 文件里面配置代理proxyTable:
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 新增，解决跨域请求问题 '/api': { target: 'http://192.168.1.103:8080/', changeOrigin: true, pathRewrite: { '`/api': '/' } }, secure: false },
不过vue-resource和axios这两个方法，可能配置了代理proxyTable还是会报：No 'Access-Control-Allow-Origin' header is present on ……的问题，这需要后端服务器配合设置：
header("Access-Control-Allow-Origin", "*"); header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
위 내용은 axios异步请求数据的使用（代码示例）의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
