angular 中使用 axios 发起 http 请求
<p><span style="font-size: 18px"><strong>angular 中使用 axios</strong></span></p><div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(154, 155, 153, 1)">/**</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 在angular 中引入第三方 http 模块的使用, 以 axios 为例</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 有两种使用方法：（本文使用Promise简单封装）</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 一. 直接在要使用请求的组件中 import axios from 'axios', 调用： axios.get/ axios.post ...</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 二. 封装成服务： </span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 1. 引入 axios: import axios from 'axios'</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 2. 用 promise rxjs 回调函数 3 种方式任选其一进行封装</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> */</span></div>
</div>
<p> </p>
<p>1. axios.service.ts中</p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">Injectable<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'@angular/core'<span style="color: rgba(197, 200, 198, 1)">;</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">axios<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'axios'</span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">@<span style="color: rgba(206, 103, 0, 1)">Injectable<span style="color: rgba(197, 200, 198, 1)">({</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> providedIn: <span style="color: rgba(154, 168, 58, 1)">'root'</span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">})</span></div>
<div><span style="color: rgba(152, 114, 162, 1)">export<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">class<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">AxiosService<span style="color: rgba(197, 200, 198, 1)"> {</span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">constructor<span style="color: rgba(197, 200, 198, 1)">() { }</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(206, 103, 0, 1)">AxiosGet<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">api<span style="color: rgba(197, 200, 198, 1)">) {</span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">return<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">new<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">Promise<span style="color: rgba(197, 200, 198, 1)">((<span style="color: rgba(96, 137, 180, 1)">resolve<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(96, 137, 180, 1)">reject<span style="color: rgba(197, 200, 198, 1)">)<span style="color: rgba(152, 114, 162, 1)">=><span style="color: rgba(197, 200, 198, 1)">{</span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">axios<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(206, 103, 0, 1)">get<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">api<span style="color: rgba(197, 200, 198, 1)">).<span style="color: rgba(206, 103, 0, 1)">then<span style="color: rgba(197, 200, 198, 1)">((<span style="color: rgba(96, 137, 180, 1)">res<span style="color: rgba(197, 200, 198, 1)">)<span style="color: rgba(152, 114, 162, 1)">=><span style="color: rgba(197, 200, 198, 1)">{</span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(206, 103, 0, 1)">resolve<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">res<span style="color: rgba(197, 200, 198, 1)">)</span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> })</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> })</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)">}</span></div>
</div>
<p>2. 根模块中注入：</p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">AxiosService<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'../service/axios.service'</span></span></span></span></span></span></span></div>
</div>
<p> </p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(197, 200, 198, 1)">providers: [<span style="color: rgba(96, 137, 180, 1)"><span style="color: rgba(197, 200, 198, 1)"><span style="color: rgba(96, 137, 180, 1)"><span style="color: rgba(197, 200, 198, 1)"><span style="color: rgba(96, 137, 180, 1)"><span style="color: rgba(197, 200, 198, 1)"><span style="color: rgba(96, 137, 180, 1)">AxiosService<span style="color: rgba(197, 200, 198, 1)">]</span></span></span></span></span></span></span></span></span></div>
</div>
<p> </p>
<p>3. 组件中使用：</p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(154, 155, 153, 1)">// 引入服务</span></div>
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">AxiosService<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'../../service/axios.service'</span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">@<span style="color: rgba(206, 103, 0, 1)">Component<span style="color: rgba(197, 200, 198, 1)">({</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> selector: <span style="color: rgba(154, 168, 58, 1)">'app-news'<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> templateUrl: <span style="color: rgba(154, 168, 58, 1)">'./news.component.html'<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> styleUrls: [<span style="color: rgba(154, 168, 58, 1)">'./news.component.css'<span style="color: rgba(197, 200, 198, 1)">]</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">})</span></div>
<div><span style="color: rgba(152, 114, 162, 1)">export<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">class<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">NewsComponent<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">implements<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">OnInit<span style="color: rgba(197, 200, 198, 1)"> {</span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">public<span style="color: rgba(197, 200, 198, 1)"> newsList<span style="color: rgba(103, 104, 103, 1)">:<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">any<span style="color: rgba(197, 200, 198, 1)">[]</span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">constructor<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(152, 114, 162, 1)"><span style="color: rgba(197, 200, 198, 1)"><span style="color: rgba(96, 137, 180, 1)"><span style="color: rgba(103, 104, 103, 1)"><span style="color: rgba(197, 200, 198, 1)"><span style="color: rgba(155, 0, 0, 1)"><span style="color: rgba(197, 200, 198, 1)"><span style="color: rgba(152, 114, 162, 1)">public<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">$axios<span style="color: rgba(103, 104, 103, 1)">:<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">AxiosService<span style="color: rgba(197, 200, 198, 1)">) { }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(206, 103, 0, 1)">ngOnInit<span style="color: rgba(197, 200, 198, 1)">() {</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(206, 103, 0, 1)">axiosGetData<span style="color: rgba(197, 200, 198, 1)">() {</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">let<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">url<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">=<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'/search/interface/getrelatequery?word=%E6%99%8B%E6%B1%9F'</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">this<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(96, 137, 180, 1)">$axios<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(206, 103, 0, 1)">AxiosGet<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">url<span style="color: rgba(197, 200, 198, 1)">).<span style="color: rgba(206, 103, 0, 1)">then<span style="color: rgba(197, 200, 198, 1)">((<span style="color: rgba(96, 137, 180, 1)">data<span style="color: rgba(197, 200, 198, 1)">)<span style="color: rgba(152, 114, 162, 1)">=><span style="color: rgba(197, 200, 198, 1)">{</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">console<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">log<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(154, 168, 58, 1)">"axios GET 请求: "<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(96, 137, 180, 1)">data<span style="color: rgba(197, 200, 198, 1)">)</span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> })</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)">}</span></div>
<div> </div>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/monkey-K/p/11621801.html
頁:
[1]