# hmyg

**Repository Path**: sunxjun/hmyg

## Basic Information

- **Project Name**: hmyg
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-25
- **Last Updated**: 2021-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 黑马优购
## 封装htp请求
### 为什么要做封装

####    1.提取公共url，方便维护
####  2.实现加载中的效果

### 实现方式 由uview 提供的功能

### 步骤
#### 1.新建文件

``` src\common\http.interceptor.js```

#### 2.编写代码

```
common/http.interceptor.js

// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
// 为一个Vue的实例，也即每个页面的"this"
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
const install = (Vue, vm) => {
  // 此为自定义配置参数，具体参数见上方说明
  Vue.prototype.$u.http.setConfig({
    baseUrl: 'https://api-hmugo-web.itheima.net/api/public/v1',
    loadingText: '努力加载中~',
    loadingTime: 800,
    // 设置自定义头部content-type
    // header: {
    // 	'content-type': 'xxx'
    // }
    // ......
  });
}

export default {
  install
}
```


#### 3.引入文件 在 main.js 中来引入

```
const app = new Vue({
  ...App
})
// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js'
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)
```
#### 4.直接使用 index.vue
```
  async onLoad() {
    const res = await this.$u.get("/home/swiperdata");
    this.swiperList = res.message;
  },
  ```