Vue2-9-Vant组件库与axios

Vue中使用Vant组件库

1. Vant 是一个轻量、可靠的移动端组件库，适用于移动端
2. Node.js环境下npm安装

• Vue 3 项目，安装最新版 Vant：npm i vant -S
• Vue 2 项目，安装 Vant 2：npm i vant@latest-v2 -S

1. 下载babel的配置插件npm i babel-plugin-import -D babel.config.js 中配置以下信息

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

1. 创建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);

1. man.js入口文件处配置

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

fetch

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

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

1. 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 {<pending>} // 通过fetch返回的是一个promise对象，就可以继续回调
  * 数据： (5) [{…}, {…}, {…}, {…}, {…}]
  */

axios

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

import axios from'axios'import{ Toast }from'vant'// 引入vant组件，发送请求时出现提示信息// 定义baseURLconst 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(newError('接口请求异常'))})exportdefault services

1. main.js文件中配置

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

1. 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是封装
*/