标签：view 维护 UNC com href 中文 -- 自身 als
什么是Axios
ajax i/o system，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
为什么学习Axios
支持 Promise API 、支持拦截请求和响应、在浏览器中发送 XMLHttpRequests 请求、在 node.js 中发送 http 请求等等
场景：在 Vue 开发项目中使用 Axios 框架
安装
npm install axios --save
在 main.js 中导入
import axios from ‘axios‘
基本使用
axios({
url: ‘http://...‘
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
开发中请求的时候有些参数是固定的，相同的，如：baseURL、header...可以进行抽取，进行 Axios 的全局配置
axios.defaults.baseURL = ‘...‘ // 配置请求 根路径
axios.defaults.timeout = 10000 // 配置 请求超时时间
...
有时候使用全局的 axios 来进行网络请求并不合适，比如需要从不同的 url 来请求一些数据，所以就需要创建 axios 实例，每个实例就能拥有自己独立的全局配置
创建实例并使用
const instance1 = axios.create({
baseURL: ‘...‘,
timeout: 10000
})
instance1({
url: ‘/category‘
}).then(res => {
console.log(res)
})
instance1({
url: ‘/music‘
}).then(res => {
console.log(res)
})
不进行封装
<template>
...
</template>
<script>
// 01. 导入 axios
import axios from ‘axios‘
export default {
name: "test",
data() {
return {
data: ‘‘
}
},
created() {
// 02. 进行网络请求
axios({
url: ‘...‘
}).then(res => {
this.data = res.data
})
}
}
</script>
<style scoped>
...
</style>
存在的问题：
假设有50个组件都使用了 axios 框架，当axios的配置格式发生变动，维护起来就很困难，或者当 axios 不再维护了，需要用其他的网络请求框架，以这样的形式进行编写的网络请求都很难维护，所以需要对 axios 这样的第三方框架进行封装
进行封装
新建一个js文件，对axios进行封装，如 test.js
import axios from ‘axios‘
export function request(config) {
// 01. 创建 axios 实例
const instance = axios.create({
baseURL: ‘...‘,
timeout: 1000 * 60 // 1 分钟
})
// 02. 发送网络请求
return instance(config)
}
新建相应模块的js文件进行网络请求，如resource.js
import {request} from "./test.js";
/**
* 获取资源
* @param page 页码
* @returns {*}
*/
export function getResData(page) {
let formData = new FormData()
formData.append(‘page‘, page)
return request({
url: ‘/shares/get‘,
method: ‘post‘,
data: formData
})
}
在组件中使用请求
<template>
...
</template>
<script>
// 01. 导入 封装的请求
import { getResData } from "../../network/resource.js";
export default {
name: "test",
data() {
return {
page: 1
data: ‘‘
}
},
created() {
// 02. 进行网络请求
getResData(this.page).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
</script>
<style scoped>
...
</style>
这样封装后这个组件依赖的就是自己封装的js文件，维护起来更快
问题描述
项目里已经解决了 axios 跨域的问题（解决方法参考：https://www.cnblogs.com/l-y-h/p/11815452.html），但在使用 element-ui 的 upload 上传组件还是存在跨域问题
文件上传组件代码
<el-upload
class="upload-demo"
ref="upload"
action="https://..."
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
出错分析
其实看一下文件上传组件的代码就能知道这样子上传并没有经过 axios ，所以还是会出现跨域问题，所以就需要让文件的上传经过axios，仔细看了 element-ui 的手册中 upload 组件的相关内容后，发现有个 http-request 的属性，可以覆盖默认的上传行为，自定义上传的实现，所以只要将文件的上传写到该属性的方法里就行了
解决
<el-upload
class="upload-demo"
action
:show-file-list="true"
:http-request="choFile"
:limit="1">
<el-button slot="trigger" size="small" type="primary">选取文件<i class="el-icon-upload"></i></el-button>
</el-upload>
在自定义方法 choFile 里用 axios 实现文件的上传即可
axios 是不错的一个网络请求框架，但是一定要根据自身的项目进行适当的封装，进行统一处理，方便后期的维护工作
Axios中文说明
axios解决跨域问题（vue-cli3.0）
作者：累成一条狗
标签：view 维护 UNC com href 中文 -- 自身 als
原文地址：https://www.cnblogs.com/hhhqqq/p/13192543.html
