# 2配置axios请求

## 1.响应拦截器

封装了一个处理axios响应的函数

```javascript
import { Notification } from 'element-ui' //提示后端接口
function handleReponse(response) {
  switch (parseInt(response.data.code)) {
    case 0:
      break
    case 404:
      Notification.error({
        title: 'error',
        message: '后端接口网址未找到, 错误代码404',
        duration: 5000,
      })
      break
    default:
      Notification({
        title: 'error',
        message: '未知错误，错误代码:' + response.data.code,
        duration: 5000,
      })
  }
  return response
}
```

在获取到响应后，调用对应的处理函数

```javascript
//响应拦截器
request.interceptors.response.use(
  (response) => {
    Nprogress.done()
    return handleReponse(response)
  },
  (error) => {
    Nprogress.done()
    return Promise.reject(error)
  }
)
```

## 解决请求跨域问题

### 1在`vue.config.js`中配置代理

```javascript
    proxy: {
      //代理服务器访问目标服务器，解决开发过程中跨域问题
      '/api': {
        target: 'http://cotton.hzau.edu.cn:80/web',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/',
        },
      },
    },
```

### 2在`.env.development`中配置代理服务器地址

`VUE_APP_Proxy=http://localhost:8080/api`

### 3在`request.js`文件中配置axios请求地址

```bash
import axios from 'axios'
import Nprogress from 'nprogress'
import { Notification } from 'element-ui' //提示后端接口

Nprogress.configure({ showSpinner: false })
const request = axios.create({
  baseURL: process.env.VUE_APP_Proxy,  //向代理服务器发送请求
  timeout: 12000,
  headers: {
    'content-Type': 'application/json',
    Accept: 'application/json',
  },
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/cottonweb/2-pei-zhi-axios-qing-qiu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.