Vue中使用axios

一、axios

        axios是一个基于Promise的网络请求库。既可以在node.js（服务器端）使用，也可以在浏览器端使用

        1. 在node.js中使用的原生的http模块

        2. 在浏览器中使用的XMLHttpRequest

二、vue中的使用方法

        1. 安装：npm install axios

        2. 引用方法

​         A、原生的方式（不推荐使用）

axios({
      url: 'http://localhost:8055/students/test',  //远程服务器的url
      method: 'get' //请求方式
    }).then(res=>{
      this.students = res.data
    }).catch(e=>{
      console.log(e)
    })
//缺点：每个使用axios的组件都需要导入

        强调：axios对服务器端数据的封装

• ​ res.config：响应信息的配置情况
• ​ res.data：响应的数据
• ​ res.headers：响应头信息（信息的大小、信息的类型）
• ​ res.request：异步的请求对象（XMLHttpRequest）
• ​ res.status：请求-响应的状态码（200）
• ​ res.statusText：请求-响应状态码对应的文本信息

​         B、在项目的main.js文件中导入axios，将其写入Vue的原型中（推荐使用）

import axios from "axios";
Vue.prototype.$http = axios //在Vue的原型上添加一个$http属性，该属性保存了axios
axios.defaults.baseURL = 'http://localhost:8055'

        在组件中通过this.$http的方式来使用

this.$http.get('http://localhost:8055/students/test').then(res=>{
          this.students = res.data
}).catch(e=>{
          console.log(e)
})

        缺点：只能在vue2中使用，vue3中不能用

        C、将axios单独封装到某个配置文件中（在配置文件中单独封装axios实例）—— （推荐使用）

//配置文件：axiosapi.js
import axios from "axios";
const axiosapi = axios.create({
    baseURL: 'http://localhost:8055', //基础的地址
    timeout: 2000  //连接超时的时间(单位是毫秒)
})
export default  axiosapi  //axiosapi是axios的实例

import $http  from '../config/axiosApi'  //$http是可变的
$http.get('/students/test').then(res=>{
          this.students = res.data
}).catch(e=>{
          console.log(e)
})

        优点：既可以在Vue2中使用，也可以在Vue3中使用

三、axios中不同请求方式向服务器提交数据的格式

        1. get方式请求：服务器端通过 req.query.参数名 来接收

        ​ 第一种：直接将请求参数绑在url地址上。

         第二种：通过params方式进行提交

    console.log('Get请求的参数：',req.query.userName),

        2. post方式请求：服务器端通过 req.body.参数名 来接收

    console.log('Post请求的参数：',req.body.userName),

        3. put方式请求：和post方式一样

​        4. delete方式请求：和get方式一样

四、实例

​        axios端

//StudentInfo.vue

//App.vue

//main.js

import Vue from 'vue'
import App from './App.vue'
// import axios from 'axios';

// Vue.config.productionTip = false
// Vue.prototype.$http = axios //在Vue的原型上添加一个$http属性，该属性保存了axios
new Vue({
  render: h => h(App),
}).$mount('#app')

//axiosApi.js

import axios from 'axios';
const axiosapi = axios.create({
    baseURL:'http://localhost:8055',//基础的地址
    timoout:2000 //连接超时的时间（单位是毫秒）
})

export  default axiosapi

        服务器端：

//studentApi.js

var express = require('express');
var router = express.Router();

/* http://localhost:8055/students/test*/
router.delete('/test', (req,res)=>{
    let arr = [
        {id:1001,name:'刘备',sex:'男',address:'野区'},
        {id:1002,name:'周瑜',sex:'男',address:'中路'},
        {id:1003,name:'吕布',sex:'男',address:'上路'},
        {id:1004,name:'大乔',sex:'女',address:'辅助'},
        {id:1005,name:'孙尚香',sex:'女',address:'下路'},
    ]
    console.log('Delete请求的参数：',req.query.userName),
    res.json(arr)
});

module.exports = router;