Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第9章 axios发送HTTP请求 9.1 安装axios

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第9章 axios发送HTTP请求

9.1 安装axios

npm i axios -S
1

在项目全局中使用axios，main.js

import axios from 'axios'
Vue.prototype.$axios=axios
1
2

这之后就可以在任何页面使用axios发送请求了。

9.1.1 组件中使用axios

接口地址：http://api.mm2018.com:8090/api/goods/home

请求方式：GET

在页面初始化并且能够操作数据时调用接口，

根据Vue的生命周期，最早可以操作data中数据和methods中方法的生命周期函数是created。

举个栗子

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{},
  created(){
    this.$axios.get("http://api.mm2018.com:8090/api/goods/home")
    .then(res => {
      console.log(res)
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以看到成功获取到接口数据。

axios使用promise语法，可以使用.then获取成功的数据，res就是最终需要的数据。

9.1.2 配置全局域名

axios提供了设置根域名的方法

main.js

这样上个栗子中的请求地址就可以简写

效果不变。

9.1.3 代码分离

随着接口增加，按上面的方式created生命周期函数中的代码会越来越多，不利于后期维护，所以可以将逻辑代码写在methods中封装成一个方法，created只负责调用方法。

举个栗子

效果不变。