axios在vue中的使用

vue中axios的使用

axios的安装与配置：
使用 npm:

$ npm install axios

使用script导入

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在vue-cli中使用

  import axios from 'axios'

在原型上定义方法，就可以在组件的methods中写this.$http({}),这个$http名字可以自己自定义，但注意不要重复冲突

   Vue.prototype.$http=axios

以下请求都以建立在 Vue.prototype.$http=axios 的基础上

.then( (res)=> {
	console.log(res)
})
相当于
.then(function(respone) {
	console.log(respone)
})

---

GET请求

发起一个user请求，参数为给定的ID

    this.$http.get('/user?ID=1234')
    .then((res)=> {
		console.log(res)
	})
    .catch((error) => {
        console.log(error);
    });

上面的请求也可选择下面的方式来写

   this.$http.get('/user',{
        params:{
            ID:12345
        }
    })
   .then((res)=> {
		console.log(res)
	})
    .catch((error) => {
        console.log(error)
    });

---

POST 请求

    this.$http.post('/user',{
        username:'zjf',
        id:07
    })
   .then((res)=> {
		console.log(res)
	})
    .catch((error) => {
        console.log(error);
    });

如果觉得传的数据很多，可以封成对象，赋值给变量

	let formData = {
	    username: 'zjf',
		sex: '男',
		age: 22,
		grade: '三'
	}
	this.$http.post('/user',formData)
    .then((res)=> {
		console.log(res)
	})
    .catch((error) => {
        console.log(error);
    });

---

发送多个不同的请求

发起一个多重并发请求

    function getUserAccount(){
      return this.$http.get('/user/12345');
    }

    function getUserPermissions(){
      return this.$http.get('/user/12345/permissions');
    }

    axios.all([getUerAccount(),getUserPermissions()])
      .then( this.$http.spread((acc,pers) => {
          //两个请求现在都完成
      })
    );

---

可以通过将相关配置传递给 axios 来进行请求。

axios(config)

    // 发送一个 POST 请求
     this.$http({
         method: 'post',
         url: '/user/12345',
         data: {
         Name: 'zjf',
         sex:'男'
     }
    });
     this.$http(url[, config])
    // 发送一个 GET 请求 (GET请求是默认请求模式)
     this.$http('/user/12345');

---

本地测试配置，利用node的express
webpack.dev.conf.js的配置

  const portfinder = require('portfinder')

    //在此后添加下面这段代码
    const express = require('express')  //(express是基于 Node.js 平台，快速、开放、极简的 web 开发框架)
    const app = express()
    const appData = require('../data.json') // 加载本地json文件
    // const seller = appData.seller // 获取对应本地数据
    // const goods = appData.goods
    // const ratings = appData.ratings
    const apiRoutes = express.Router()//创建一个路由
    app.use('/api',apiRoutes)

    //然后找到devSeerver，在里面添加
     before (app) {
      app.get('/api/data',(reg,res) => {
       res.json({
        errno: 0,
        data: appData
       }) // 接口返回json数据，上面配置的数据appData就复制给data请求后调用
      })
      //然后就可以在组件created或methods中使用
      created () {
        this.$http.get('/api/data').then((response) => {
         console.log(response.data);  
        })
      }