Axios发送get、post请求,获取并处理返回值

一:axios是什么。
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
二:axios特点。
1.从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应 (就是有interceptor)
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF
三:安装配置。
1,使用 npm(当大量使用axios时,可以将axios作为vue的插件全局使用):
$ npm install axios
2,使用 cdn:

在script标签中引入:https://unpkg.com/axios/dist/axios.min.js

3,.在main.js中引入文件

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

axios.defaults.baseURL='/api'

四:get请求方法。
方法一:

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

方法二:

axios.get('/user', {
    params: {
      ID: 0909
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

五;post请求方法。

axios.post('/user', {
    firstName: 'frist',
    lastName: 'last'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

六:在生命周期mounted里发起请求。

mounted(){
	//get
	this.axios.get('url').then(res => {
		console.log('success')   //调用成功
	},res => {
		console.log('error')   //调用失败
	})
	//post
	this.axios.post('url').then(res => {
		console.log('success')   //调用成功
	},res => {
		console.log('error')   //调用失败
	})
}

实例:

<template>
<div>
    <div class="topAll">
        <div class="detailsTop">
            <img :src="main.image">
        </div>
        <div class="detailstitle">
            {{main.title}}
            <div class="subTitle">{{main.image_source}}</div>
        </div>
        <div v-html="main.body" class="dParagraph"></div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            main:''
        }
    },
    mounted:function(){
        this.axios.get('news/3892357').then(res => {
            this.main = res.data
        })
    }
}
</script>

你可能感兴趣的:(Axios发送get、post请求,获取并处理返回值)