VUE----脚手架3使用axios

Axios 是一个基于 promise 的 HTTP 库，也是vue推荐使用的网络请求框架

1.下载axios：

npm install axios --save

2.下载qs：

npm install qs --save 

3.简单封装请求基类：

1.在src目录下创建文件夹unil

创建unit文件夹

2.在unil文件夹下创建request.js文件

import axios from 'axios';
import qs from 'qs'
import store from 'store/index'       //已经设置路径别名，否则相对路径引用
import { Message } from 'element-ui'  //引入element-ui提示信息插件..

const   service=axios.create({
            timeout:5000,                                   //超时时间
            baseURL:"https://www.liurulan.cn/",             // 我们在请求接口的时候就不同写前面 会自动我们补全
            transformRequest: data => qs.stringify(data)    //post请求参数处理,防止post请求跨域
        })
// http request 拦截器
  service.interceptors.request.use(config=>{
    //如果存在jwt，则将jwt添加到每次请求之中..
      if(store.state.jwt){
        config.params = {
          ...config.params,
          jwt:store.state.jwt
        }
      }  
    return config
  },err=>{
    return err
  })
// http response 拦截器
  service.interceptors.response.use(response=>{
    //接收返回数据..
      const res = response.data
    //判断返回数据是否存在状态code和错误提示信息..
      if(!res.code || !res.msg){
        return showMessage('响应数据格式错误')
      }
    //判断状态code是否为指定数值(200)..
      if(res.code != 200){
        return showMessage(res.msg)
      }
    return res
  },err=>{
    return showMessage(err.message)
  })

//封装错误提示信息..
    function showMessage(msg){
        Message({
            message: msg,         //错误提示信息
            type: 'error',        //显示类型
            duration: 3 * 1000    //展示时间
        })
        return Promise.reject()
    }
export default service;

4.创建请求类文件夹

文件夹截图

5.在api文件夹下创建data.js文件

6.封装data.js请求类：

import request from "../util/request.js";
export function getData(){
    return request({
        //请求地址..
            url:'data.php',
        //请求方式..
            method:"get",
        //post请求时使用..
            data:{
                name:'lisi'
            },
        //get请求时使用..
            params:{
                id:'hahahhaahah'
            }
    })
}

7.在组件中使用：

import {getData} from '../../api/data.js'
created(){
    let that = this   //很重要！！！
    getData().then(function(res){
        let data = res.data
        console.log(data)
    })
}

8.请求数据打印：

打印截图

9.axios在vue脚手架中的基本使用就完成了