VUE—axios的get/post方法（图文详情）

VUE—axios的get/post方法

下载引入axios

第一步：在methods写方法

methods: {
    getUrl () { //get方法
      axios.get('https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/aa')
        .then((res) => {
          console.log(res.data)
        })
         // then是获取成功的回调函数
        .catch((err) => {
          console.log(err)
      })
      // catch是获取失败的回调函数，若地址错误console.log会出现404
    },
    postUrl () {  //post方法
      axios.post('https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/bb')
        .then((res) => {
          console.log(res.data)
        })
        .catch((err) => {
          console.log(err)
        }) 
    },
    axiosFn () {  //不推荐
      axios({
        method: 'get',
        url: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/aa'
      })
        .then((res) => {
          console.log(res.data)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },

第二步：在created调用方法

 created () {
    this.getUrl()
    this.postUrl()
    this.axiosFn()
  }

console.log结果如下