Vue2-9-Vant组件库与axios

Vue中使用Vant组件库 Vant 是一个轻量、可靠的移动端组件库，适用于移动端Node.js环境下npm安装 Vue 3 项目，安装最新版 Vant：npm i vant -SVue 2 项目，安装 Vant 2：npm i vant@latest-v2 -S 下载babel的配置插件npm i babel-plugin-import -D
babel.config.js 中配置以下信息

plugins: [ // 插件配置
    ['import', {
      libraryName: 'vant', // 名字
      libraryDirectory: 'es', // 目录名称
      style: true // 自动引入样式
    }, 'vant']
  ]

创建utils文件夹下创建vant-import.js文件有两种使用方式 按需引入配置引入组件信息（推荐）

import Vue from 'vue'
import {
  Button,
  Cell,
  Calendar,
} from 'vant' // 从vant中拿到需要的组件

Vue.use(Button)
Vue.use(Cell)
Vue.use(Calendar) // 注册全局使用

一次性导入所有文件

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css'; // 引入样式表，按需注册时会自动引入

Vue.use(Vant);

man.js入口文件处配置

import './utils/vant-import' // 引入vant组件

fetch Fetch API 提供了一个 JavaScript 接口，用于访问和 *** 纵 HTTP 管道的一些具体部分，例如请求和响应它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源语法：传入两个值（ 请求的url,控制不同配置的 init 对象）返回一个promise对象

fetch(url='http://example.com/movies.json',[init])
  .then(response => response.json())
  .then(data => console.log(data));

App.vue中使用

const result = fetch('http://localhost:3000')
    console.log('result:', result)
    result
      .then(res => res.json())
      .then(data => {
        console.log('数据：', data)
      })
// 带参写法
//const result = fetch('http://localhost:3000',{
//	method: 'POST',
//	data: {
//		id: 1
//	}
})
//console.log('result:', result)
//result
//  .then(res => res.json())
//  .then(data => {
//    console.log('数据：', data)
//  })
  /*
  * 控制台打印
  * result: Promise {} // 通过fetch返回的是一个promise对象，就可以继续回调
  * 数据： (5) [{…}, {…}, {…}, {…}, {…}]
  */    

axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中安装npm install axiosutils下的新建request.js文件

import axios from 'axios'
import { Toast } from 'vant' // 引入vant组件，发送请求时出现提示信息
// 定义baseURL
const baseURL = 'http://localhost:3000'
// 创建axios实例
const services = axios.create({
    baseURL,
    timeout: 1000, // 1s后还没数据回来结束此次响应
})
// 拦截请求
services.interceptors.request.use(config=>{
    // 加载提示
    Toast.loading({
        message: '加载失败',
        duration: 0,
    })
    return config
})
// 拦截响应
services.interceptors.response.use(resDate=>{
    // 关闭提示
    Toast.clear()
    // 响应数据处理：根据前后端接口规范来处理数据结构
    if(resDate.status === 200){
        return resDate.data
    }
    
    return Promise.reject(new Error('接口请求异常'))
})
export default services

main.js文件中配置

Vue.prototype.$http=request // 将request挂载到Vue的原型上于$bus类似，这样全局都可调用

App.vue中调用

created(){
    this.$http({
      url:'http://localhost:3000',
      method: 'GET',
    }).then(data=>{
      console.log(data);
    })
  },
/*
* 控制台输出
* {data: Array(5), status: 200, statusText: 'OK', headers: {…}, config: {…}, …} // request中的输出
* [{…}, {…}, {…}, {…}, {…}] // App.vue中的输出
* 可以看出axios对数据进行了二次封装，这与fetch两次回调拿到数据有区别
* axios与fetch返回的都是promise对象
* fetch是规范底层api
* axios是封装
*/