# axios原理解析

**Repository Path**: noctilucent/analysis-of-axios-principle

## Basic Information

- **Project Name**: axios原理解析
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-09
- **Last Updated**: 2022-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: hy
 * @Date: 2022-03-09 14:05:44
 * @LastEditTime: 2022-03-11 16:53:39
 * @LastEditors: hy
 * @Description: 精益求精，工匠精神
 * @FilePath: \json-server\readme.md
 * 精益求精，工匠精神
-->
### 1.npm install -g json-server 全局安装


### 2.创建json文件


### 3.因为我的node版本比较低，是10.几的，所以导致安装json-server 也需要调整版本
npm install -g json-server@0.15.0
指定版本
这个在node开发很常见

### 4.json-server --watch db.json  
输入监视文件命令

### 可以根据条件查询
http://localhost:3000/course/1001
后面带上参数


### axios的基本使用


### 微信页面script标签添加crossorigin=“anonymous”导致页面加载失败
意思是前端向服务端发送跨域资源请求访问这个js文件，但是服务端并不同意，所以服务端拒绝访问这个地址。

后来发现将crossorigin=“anonymous”属性去掉，就可以正常访问了。

分析原因:添加了这个属性就意味着前端向服务端发送了跨域请求。服务端并不允许你的这个请求通过，那么就会导致拒绝请求这个地址，数据加载不出来。
解决办法:
不对该文件进行强制性的跨域请求，将script标签中的 crossorigin=“anonymous”属性去掉即可。

### axios其他方式发送请求
axios.request
axios.post

### axios请求响应结果的结构
config
data
headers
request

axios还是发送ajax请求，底层的就是xmlhttprequest


### axios配置对象详细说明
proxy{
    protocol:"https",
    host:"127.0.0.1",
    port:9000,
    auth:{
        username:
        password:
    }
}

### axios默认配置
axios.defaults.method="GET"
//我们发现没有影响嗯
 axios.defaults.baseURL="http://localhost:1111"
        //发送get请求
        btns[0].addEventListener("click", function (e) {
            console.log('e', e);
            //返回结果是一个promise对象
            //发送get请求
            axios.request({
                method: "GET",
                url: "/course"
            }).then(response => {
                console.log('response', response);
            })
        })


### axios创建实例对象
````js
        const btns = document.querySelectorAll("button");
        //创建实例对象
        const duanzi = axios.create({
            baseURL:"https://api.apiopen.top",
            timeout:2000
        })
        //这里duanzi与axios对象的功能几乎是一样的
        console.log('duanzi',duanzi);
        // duanzi({
        //     url:"/getJoke"
        // }).then(response=>{
        //     console.log('response',response);
            
        // })
        //上面的也可以换一种写法
        duanzi.get("/getJoke").then(response=>{
            console.log('response-get',response);
            
        })
````

### axios拦截器
### 取消请求
json-server --port 1111 --watch db.json --d 3000      

### axios源码分析